一、用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>