一、vuejs 2.0中js實(shí)時(shí)監(jiān)聽input
在2.0的版本中，vuejs把v-el 和 v-ref 合并為一個(gè) ref 屬性了，可以在組件實(shí)例中通過 $refs 來調(diào)用。這意味著 v-el:my-element 將寫成這樣： ref="myElement" ， v-ref:my-component 變成了這樣： ref="myComponent" 。綁定在一般元素上時(shí)，ref 指DOM元素，綁定在組件上時(shí)，ref 為一組件實(shí)例。
因?yàn)?v-ref 不再是一個(gè)指令了而是一個(gè)特殊的屬性，它也可以被動(dòng)態(tài)定義了。這樣在和v-for 結(jié)合的時(shí)候是很有用的：
<p v-for="item in items" v-bind:ref="'item' + item.id"></p>
以前 v-el/v-ref 和 v-for 一起使用將產(chǎn)生一個(gè)DOM數(shù)組或者組件數(shù)組，因?yàn)闆]法給每個(gè)元素一個(gè)特定名字。現(xiàn)在你還仍然可以這樣做，給每個(gè)元素一個(gè)同樣的ref：
<p v-for="item in items" ref="items"></p>
和 1.x 中不同， $refs 不是響應(yīng)的，因?yàn)樗鼈冊(cè)阡秩具^程中注冊(cè)/更新。只有監(jiān)聽變化并重復(fù)渲染才能使它們響應(yīng)。另一方面，設(shè)計(jì)$refs主要是提供給 js 程序訪問的，并不建議在模板中過度依賴使用它。因?yàn)檫@意味著在實(shí)例之外去訪問實(shí)例狀態(tài)，違背了 Vue 數(shù)據(jù)驅(qū)動(dòng)的思想。
下面給一個(gè)vuejs2.0版本的例子：
<div id="example"> <input type="text" v-model="items.type1" ref="type1"/> <input type="text" v-model="items.type2" ref="type2"/> <div class="show">輸入框一的內(nèi)容：{{items.type1}}</div> <div class="show">輸入框二的內(nèi)容：{{items.type2}}</div></div><script> var example1 = new Vue({ el: '#example', data: { items: { type1:'第一個(gè)輸入框', type2:'第二個(gè)輸入框' } }, ready:function(){ }, watch:{ items:{ handler:function(val,oldval){ console.log(this.$refs.type1.value); console.log(this.$refs.type2.value); }, deep:true } }, methods:{ } })</script>結(jié)果如圖所示：
當(dāng)在輸入框輸入文字的時(shí)候，js可以實(shí)時(shí)監(jiān)聽其指定輸入框文本的值。
二、vuejs 1.x中js實(shí)時(shí)監(jiān)聽input
那么在vuejs 1.x的版本中是如何在js中監(jiān)聽某個(gè)指定的input的value變化的呢？
通過如下方式：
<input type="text" v-model="items.type1" v-el:texttype1/>
然后在vuejs中的watch中監(jiān)聽：
watch:{ items:{ handler:function(val,oldval){ console.log(this.$els.texttype1.value); }, deep:true }}整體代碼：
<div id="example"> <input type="text" v-model="items.type1" v-el:texttype1/> <input type="text" v-model="items.type2" v-el:texttype2/> <div class="show">輸入框一的內(nèi)容：{{items.type1}}</div> <div class="show">輸入框二的內(nèi)容：{{items.type2}}</div></div><script> var example1 = new Vue({ el: '#example', data: { items: { type1:'第一個(gè)輸入框', type2:'第二個(gè)輸入框' } }, ready:function(){ }, watch:{ items:{ handler:function(val,oldval){ console.log(this.$els.texttype1.value); }, deep:true } }, methods:{ } })</script>實(shí)現(xiàn)的效果如圖所示：
當(dāng)在輸入框中輸入文字時(shí)，js中實(shí)時(shí)監(jiān)聽其變化的值。
總結(jié)
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)VeVb武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
