vue实现实时监听文本框内容的变化（最后一种为原生js）
生活随笔
收集整理的這篇文章主要介紹了
vue实现实时监听文本框内容的变化（最后一种为原生js）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、用watch方法監(jiān)聽這個(gè)變量。
<!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` 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行 question: function () {this.answer = 'Waiting for you to stop typing...'alert(this.question)}}}) </script> </body> </html>二、用watch監(jiān)聽對(duì)象屬性。
<!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的內(nèi)容：{{items.type}}</div> <div class="show">輸入框2的內(nèi)容：{{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實(shí)現(xiàn)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>輸入監(jiān)測(cè)</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="測(cè)試"/> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/dancer0321/p/9605512.html
總結(jié)
以上是生活随笔為你收集整理的vue实现实时监听文本框内容的变化（最后一种为原生js）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java selenium操作下拉滚动条
- 下一篇： vue组件通信v兄弟组件通信eventb