vue.js 1.x與2.0中js實(shí)時(shí)監(jiān)聽input值的變化
一、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)文章
Vue+Element-ui日歷排班自定義實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue+Element-ui日歷排班自定義的相關(guān)資料,有現(xiàn)成的日歷插件但是不符合需求,所以項(xiàng)目中使用vue+element的表格組件自己實(shí)現(xiàn)一個(gè)日歷組件,需要的朋友可以參考下2023-09-09Vue引用Swiper4插件無(wú)法重寫分頁(yè)器樣式的解決方法
今天小編就為大家分享一篇Vue引用Swiper4插件無(wú)法重寫分頁(yè)器樣式的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09一文帶你了解什么是Vue的前端微服務(wù)架構(gòu)(Micro Frontends)
微前端架構(gòu)是一種將大型前端應(yīng)用拆分為多個(gè)小型、獨(dú)立的前端應(yīng)用的架構(gòu)風(fēng)格,每個(gè)小型前端應(yīng)用都可以獨(dú)立部署、獨(dú)立開發(fā)和獨(dú)立運(yùn)行,下面我們就來(lái)學(xué)習(xí)一下它的相關(guān)使用吧2023-11-11vue項(xiàng)目下載文件重命名監(jiān)測(cè)進(jìn)度demo
這篇文章主要為大家介紹了vue項(xiàng)目下載文件重命名監(jiān)測(cè)進(jìn)度demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)
這篇文章主要介紹了vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05vue等兩個(gè)接口都返回結(jié)果再執(zhí)行下一步的實(shí)例
這篇文章主要介紹了vue等兩個(gè)接口都返回結(jié)果再執(zhí)行下一步的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09