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