vue实现实时监听⽂本框内容的变化（最后⼀种为原⽣js）⼀、⽤watch⽅法监听这个变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello vue</title>
<script src="cdn.bootcss/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 '
alert(this.question)
}
}
})
</script>
</body>
</html>
⼆、⽤watch监听对象属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="cdn.bootcss/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="pe" ref="type"/>
<input type="text" v-model="t" ref="content">
<div class="show">输⼊框1的内容：{{pe}}</div>
<div class="show">输⼊框2的内容：{{t}}</div>
</div>
<script>
var example1 = new Vue({
el: '#example',
data: {
items: {
type: '千年之恋:',
content: '是谁在悬崖上泡⼀壶茶'
}
},
watch: {
items: {
handler: function() {
alert(this.$pe.value + this.$t.value);
},
deep: true
}
}html内容文本框
})
</script>
</body>
</html>
三、原⽣js实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输⼊监测</title>
<script type="text/javascript">
var ElementById("txt");
var ElementById("show"); if(document.all){
oshow.innerHTML=otxt.value;
}
}
else{
oshow.innerHTML=otxt.value;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="测试"/>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。