欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js 1.x與2.0中js實(shí)時(shí)監(jiān)聽input值的變化

 更新時(shí)間:2017年03月15日 10:00:03   作者:風(fēng)雨后見彩虹  
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實(shí)時(shí)監(jiān)聽input值的變化的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。

一、vuejs 2.0中js實(shí)時(shí)監(jiān)聽input

在2.0的版本中,vuejs把v-el 和 v-ref 合并為一個(gè) ref 屬性了,可以在組件實(shí)例中通過(guò) $refs 來(lái)調(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)樗鼈冊(cè)阡秩具^(guò)程中注冊(cè)/更新。只有監(jiān)聽變化并重復(fù)渲染才能使它們響應(yīng)。另一方面,設(shè)計(jì)$refs主要是提供給 js 程序訪問的,并不建議在模板中過(guò)度依賴使用它。因?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變化的呢?

通過(guò)如下方式:

<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é)

好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論