vue.js中怎么實(shí)時(shí)監(jiān)聽input值的變化
今天就跟大家聊聊有關(guān)vue.js中怎么實(shí)時(shí)監(jiān)聽input值的變化，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營銷需求！創(chuàng)新互聯(lián)公司具備承接各種類型的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)項(xiàng)目的能力。經(jīng)過10年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。
一、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è)特定名字?，F(xiàn)在你還仍然可以這樣做，給每個(gè)元素一個(gè)同樣的ref：
<p v-for="item in items" ref="items"></p>
和 1.x 中不同， $refs 不是響應(yīng)的，因?yàn)樗鼈冊阡秩具^程中注冊/更新。只有監(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)的效果如圖所示：
看完上述內(nèi)容，你們對vue.js中怎么實(shí)時(shí)監(jiān)聽input值的變化有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
本文題目：vue.js中怎么實(shí)時(shí)監(jiān)聽input值的變化
本文URL：http://muchs.cn/article28/ipiojp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、動(dòng)態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)、用戶體驗(yàn)、面包屑導(dǎo)航、網(wǎng)站策劃
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
