基于Vue 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說明介紹
更新時(shí)間：2018年08月24日 10:41:23 作者：嘿丷如歌
今天小編就為大家分享一篇基于Vue 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說明介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="items.type" ref="type" />
<div class="show">輸入框的內(nèi)容：{{items.type}}</div>
</div>
<script>
var example1 = new Vue({
el: '#example',
data: {
items: {
type: '千年之戀:'
}
},
watch: {
items: {
handler: function() {
alert(this.$refs.type.value);
},
deep: true
}
}
})
</script>
</body>
</html>
ref 說明
<div class="touchscroll"> // </div>
如果我們想要獲取這個(gè)div的某個(gè)值，比如scrollTop的值，常規(guī)的做法是我們必須用document.querySelector（".touchScroll"）獲取這個(gè)dom節(jié)點(diǎn)，然后在獲取scrollTop的值。
但是用ref綁定之后，我們就不需要在獲取dom節(jié)點(diǎn)了，直接在上面的div上綁定div，然后$refs里面調(diào)用就行
因此上面可以寫成：
<div class="touchscroll" ref='div'> // </div>
然后在javascript里面這樣調(diào)用：
this.$refs.div.scrollTop.
這樣就可以減少獲取dom節(jié)點(diǎn)的消耗了！
以上這篇基于Vue 2.0 監(jiān)聽文本框內(nèi)容變化及ref的使用說明介紹就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析
這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
詳解keep-alive + vuex 讓緩存的頁(yè)面靈活起來
這篇文章主要介紹了keep-alive + vuex 讓緩存的頁(yè)面靈活起來，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue循環(huán)組件加validate多表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇Vue循環(huán)組件加validate多表單驗(yàn)證的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖書管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue純前端實(shí)現(xiàn)將頁(yè)面導(dǎo)出為pdf和word文件
這篇文章主要為大家詳細(xì)介紹了vue如何通過純前端實(shí)現(xiàn)將頁(yè)面導(dǎo)出為pdf和word文件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01
Monaco?Editor開發(fā)SQL代碼提示編輯器實(shí)例詳解
這篇文章主要為大家介紹了Monaco?Editor開發(fā)SQL編輯器實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)
前后端分離的項(xiàng)目，遇到了對(duì)密碼進(jìn)行加密的情況，在前端或者是在后端加密都是可以的，本文主要介紹了Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue2.0實(shí)戰(zhàn)之使用vue-cli搭建項(xiàng)目（2）
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第二篇使用vue-cli搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue使用js-file-download插件下載文件亂碼的解決
這篇文章主要介紹了vue使用js-file-download插件下載文件亂碼的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對(duì)百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03