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