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)文章
Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解
生活中常用的幾種坐標(biāo)有：WGS-84、GCJ-02與BD-09。本文將利用Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能，即實(shí)現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(biāo)，需要的可以參考一下2022-04-04
本文主要介紹了解決vuex?數(shù)據(jù)丟失問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決
在項(xiàng)目中使用elementui確實(shí)是很方便的一件事,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue中對(duì)象數(shù)組改變其對(duì)象內(nèi)容值數(shù)組沒(méi)變化的原因與解決方案
最近開發(fā)遇到一個(gè)問(wèn)題,修改對(duì)象某一個(gè)索引對(duì)象時(shí),直接將對(duì)象賦值給數(shù)組的某一索引對(duì)象,該數(shù)組沒(méi)變化,在 Vue 中,直接修改對(duì)象數(shù)組中某個(gè)對(duì)象的屬性值時(shí),數(shù)組的引用本身未改變,本文介紹了詳細(xì)的原理分析和解決方案,需要的朋友可以參考下2025-03-03
項(xiàng)目需求需要引入地圖,對(duì)于目前最新的Vue3.0,無(wú)論是百度/高德/騰訊地圖目前還沒(méi)有適配,只有Vue?2.x版本的:?目前只有谷歌地圖的Vue3.0適配,下面這篇文章主要給大家介紹了關(guān)于如何在vue3項(xiàng)目中使用新版高德地圖的完整步驟,需要的朋友可以參考下2023-02-02
vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名
這篇文章主要介紹了vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue移動(dòng)端裁剪圖片結(jié)合插件Cropper的使用實(shí)例代碼
本篇文章主要介紹了vue移動(dòng)端裁剪圖片結(jié)合插件Cropper的使用實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue如何由本地js中存放的url地址獲取圖片問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vue3使用setup監(jiān)聽props實(shí)現(xiàn)方法詳解
這篇文章主要為大家介紹了Vue3使用setup監(jiān)聽props實(shí)現(xiàn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
一個(gè)vue組件庫(kù)發(fā)布到npm的完整實(shí)現(xiàn)過(guò)程
工作的時(shí)候總是使用別人的npm包,然而我有時(shí)心底會(huì)好奇自己如何發(fā)布一個(gè)npm包呢,什么時(shí)候自己的包能夠被很多人喜歡并使用呢,下面這篇文章主要給大家介紹了關(guān)于一個(gè)vue組件庫(kù)發(fā)布到npm的相關(guān)資料,需要的朋友可以參考下2022-03-03