vue实现实时监听文本框内容的变化（最后一种为原生js）
一、用watch方法监听这个变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello vue</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body> <div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function () {
this.answer = 'Waiting for you to stop typing...'
alert(this.question)
}
}
})
</script>
</body>
</html>
二、用watch监听对象属性。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head> <body>
<div id="example">
<input type="text" v-model="items.type" ref="type" />
<input type="text" v-model="items.content" ref="content">
<div class="show">输入框1的内容：{{items.type}}</div>
<div class="show">输入框2的内容：{{items.content}}</div>
</div>
<script>
var example1 = new Vue({
el: '#example',
data: {
items: {
type: '千年之恋:',
content: '是谁在悬崖上泡一壶茶'
}
},
watch: {
items: {
handler: function() {
alert(this.$refs.type.value + this.$refs.content.value);
},
deep: true
}
}
})
</script>
</body> </html>
三、原生js实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入监测</title>
<script type="text/javascript">
window.onload=function(){
var otxt=document.getElementById("txt");
var oshow=document.getElementById("show");
if(document.all){
otxt.onpropertychange=function(){
oshow.innerHTML=otxt.value;
}
}
else{
otxt.oninput=function(){
oshow.innerHTML=otxt.value;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="测试"/>
</body>
</html>
vue实现实时监听文本框内容的变化（最后一种为原生js）的更多相关文章
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- js监听文本框内容变化
js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- vue中实时监听对象或变量的变化
demo中监听了Input的变化,主要用到的是watch 1. 监听单个对象: <template> <div class="personal-center"&g ...
- 第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- IOS NSNotificationCenter（通知 的使用）监听文本框的文字改变
监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...
随机推荐
- 使用jEnv在Mac/Linux环境配置多版本Java
jEnv 是什么? 先来看一下官方介绍 jEnv is a command line tool to help you forget how to set the JAVA_HOME environm ...
- 北京大学Cousera学习笔记--8-计算导论与C语言基础--C的运算部分
赋值运算符 1.两边类型不同:赋值时要进行类型转换,右边要转换到左边 2.长数赋值短数 最后的部分截断赋值给短数 3.短数赋给长数 数不变 4.符号位赋值 --计算机不区分符号位数字位,直接赋值 表达 ...
- eclipse 没有web项目和server
New项目中没有web Window菜单的preference没有server 解决方法:打开help->Install new software… 在work with中找到http://do ...
- es6 遍历总结
1.for in / for of for in --> index是key值 var array = [1,2,3,4,5]; for(let index in array) { consol ...
- 常用MSSQL语句
现在很少用SQL 写东西,但有时真用起来半天想不起来,看来还是有必要记录一下... 新建表: create table [表名] ( [自动编号字段] int IDENTITY (1,1) PRIMA ...
- Oracle 11g 概述 chaper1
关系模型 E-R 模型 范式 1.简述Oracle oracle 是1977 IBM 公司研发的一款强大的数据库软件. 2.关系型数据的基本理论 关系型数据库与数据库管理系统 1)数据库是因为有对 ...
- 高校表白APP-冲刺第三天
第三天,我们进行了第三次会议. 一.任务: 昨日任务:完成APP基本的登陆框架. 今日任务:完成登录界面修改界面注册界面,并解决闪退. 明日任务:完成界面跳转,并彻底解决闪退. 二.遇到的困难: 今天 ...
- selenium环境配置
在命令提示符中查找 pip的位置 where pip 输入pip,出现一下信息显示,如果提示['pip' 不是内部或外部命令,也不是可运行的程序 或批处理文件.]请查看你的系统Path 上查看你的配置 ...
- web 分享到facebook
利用meta 使自己的页面变为一种富媒体文件,利用facebook的 open Graph 比如你的html页面想要以图片的形式被分享 <meta property="og:image ...
- 【js】了解前端缓存，收获不止于此！
了解前端缓存,收获不止于此! 这次我们来讲一下关于前端缓存的问题.感谢赵欢同学提供doc素材. 首先,开局我画了一张图,你会对文章有一个大局了解. 今天讲的是前端缓存. 前端缓存有3大种:如图,分为H ...