vue中$refs的用法及作用詳解
一般來(lái)講，獲取DOM元素，需document.querySelector（".input1"）獲取這個(gè)dom節(jié)點(diǎn)，然后在獲取input1的值。
但是用ref綁定之后，我們就不需要在獲取dom節(jié)點(diǎn)了，直接在上面的input上綁定input1，然后$refs里面調(diào)用就行。
然后在javascript里面這樣調(diào)用：this.$refs.input1 這樣就可以減少獲取dom節(jié)點(diǎn)的消耗了
用法如下:
HTML:
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div>
JS:
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="test"; //this.$refs.input1 減少獲取dom節(jié)點(diǎn)的消耗
}
}
})
</script>
下面給大家介紹下vue $refs的基本用法，具體代碼如下所示：
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22"; //this.$refs.input1 減少獲取dom節(jié)點(diǎn)的消耗
}
}
})
</script>
一般來(lái)講，獲取DOM元素，需document.querySelector（".input1"）獲取這個(gè)dom節(jié)點(diǎn)，然后在獲取input1的值。
但是用ref綁定之后，我們就不需要在獲取dom節(jié)點(diǎn)了，直接在上面的input上綁定input1，然后$refs里面調(diào)用就行。
然后在javascript里面這樣調(diào)用：this.$refs.input1 這樣就可以減少獲取dom節(jié)點(diǎn)的消耗了
總結(jié)
以上所述是小編給大家介紹的vue中$refs的用法及作用詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)
及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了沒(méi)有搭建腳手架時(shí)vue組件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼
本文主要介紹了vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
詳解Vue路由開(kāi)啟keep-alive時(shí)的注意點(diǎn)
這篇文章主要介紹了詳解Vue路由開(kāi)啟keep-alive時(shí)的注意點(diǎn)，非常具有實(shí)用價(jià)值，有興趣的朋友可以了解一下2017-06-06
vue中實(shí)現(xiàn)一個(gè)項(xiàng)目里兼容移動(dòng)端和pc端
這篇文章主要介紹了vue中實(shí)現(xiàn)一個(gè)項(xiàng)目里兼容移動(dòng)端和pc端問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue.config.js常用配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了nuxt使用vuex存儲(chǔ)及獲取用戶信息踩坑的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列
這篇文章主要為大家詳細(xì)介紹了vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
uniapp項(xiàng)目國(guó)際化標(biāo)準(zhǔn)的配置與實(shí)現(xiàn)
UniApp是一種基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架,可以快速地開(kāi)發(fā)同時(shí)運(yùn)行在多個(gè)平臺(tái)的應(yīng)用程序,這篇文章主要介紹了uniapp項(xiàng)目國(guó)際化標(biāo)準(zhǔn)的配置與實(shí)現(xiàn),需要的朋友可以參考下2023-11-11