Vue 2中ref屬性的使用方法及注意事項(xiàng)
發(fā)現(xiàn)問(wèn)題
最近寫(xiě)東西遇到了莫名其妙的問(wèn)題,用ref屬性原以為它會(huì)獲得一個(gè)數(shù)組
// html
<ul>
<li ref="refCon">1</li>
<li ref="refCon">2</li>
</ul>
// js
created: function() {
this.$nextTick(() => {
console.log(this.$refs.refCon)
// 打印結(jié)果:<li>2</li> 本以為會(huì)獲得一個(gè)數(shù)組
})
}
后來(lái)去看了下文檔才搞明白o(hù)rz。(沒(méi)仔細(xì)看文檔的鍋

正確使用方法
這下就明白了
// html
<ul>
<li v-for="item in people" ref="refContent">{{item}}</li>
</ul>
// js
data: {
people:['三姑','四嬸','五叔','六姨','七舅姥爺']
},
created: function() {
this.$nextTick(() => {
console.log(this.$refs.refContent)
})
}

以及一定要注意
// js
data: {
people:['三姑','四嬸','五叔','六姨','七舅姥爺']
},
created: function() {
console.log(this.$refs.refContent)
// undefined
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue中computed和watch的使用實(shí)例代碼解析
這篇文章主要介紹了vue中computed和watch的綜合運(yùn)用實(shí)例,主要需求是點(diǎn)擊按鈕實(shí)現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Vue利用vue-baidu-map實(shí)現(xiàn)獲取經(jīng)緯度和搜索地址
在開(kāi)發(fā)項(xiàng)目的時(shí)候,發(fā)現(xiàn)需要獲取經(jīng)緯度,由于這個(gè)項(xiàng)目是用vue寫(xiě)的,最后決定使用vue-baidu-map來(lái)快速獲取經(jīng)緯度,感興趣的可以了解一下2022-09-09
Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue
這篇文章主要介紹了Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
Vue-cli3項(xiàng)目配置Vue.config.js實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于Vue-cli3項(xiàng)目配置Vue.config.js的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
Vue項(xiàng)目分環(huán)境打包的實(shí)現(xiàn)步驟
這篇文章主要介紹了Vue項(xiàng)目如何分環(huán)境打包,實(shí)現(xiàn)方法大概分為六步驟,需要的朋友可以參考下2018-04-04
vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
vue中解決拖拽改變存在iframe的div大小時(shí)卡頓問(wèn)題
這篇文章主要介紹了vue中解決拖拽改變存在iframe的div大小時(shí)卡頓問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04

