Vue 2中ref屬性的使用方法及注意事項
更新時間：2017年06月12日 11:52:39 作者：子遠野天
這篇文章主要給大家介紹了關(guān)于Vue 2中ref屬性的使用方法及注意事項的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習價值，需要的朋友們下面跟著小編一起來學(xué)習學(xué)習吧。
發(fā)現(xiàn)問題
最近寫東西遇到了莫名其妙的問題，用ref屬性原以為它會獲得一個數(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> 本以為會獲得一個數(shù)組
})
}
后來去看了下文檔才搞明白orz。（沒仔細看文檔的鍋
正確使用方法
這下就明白了
// 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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了vue中computed和watch的綜合運用實例,主要需求是點擊按鈕實現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
element vue validate驗證名稱重復(fù) 輸入框與后臺重復(fù)驗證 特殊字符 字符長度 及注意事項小結(jié)【實例代碼
這篇文章主要介紹了element vue validate驗證名稱重復(fù) 輸入框與后臺重復(fù)驗證 特殊字符 字符長度 及注意事項小結(jié),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
Vue利用vue-baidu-map實現(xiàn)獲取經(jīng)緯度和搜索地址
在開發(fā)項目的時候，發(fā)現(xiàn)需要獲取經(jīng)緯度，由于這個項目是用vue寫的，最后決定使用vue-baidu-map來快速獲取經(jīng)緯度，感興趣的可以了解一下2022-09-09
Vue2.5學(xué)習筆記之如何在項目中使用和配置Vue
這篇文章主要介紹了Vue2.5學(xué)習筆記之如何在項目中使用和配置Vue的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
Vue-cli3項目配置Vue.config.js實戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于Vue-cli3項目配置Vue.config.js的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2018-07-07
這篇文章主要介紹了Vue項目如何分環(huán)境打包,實現(xiàn)方法大概分為六步驟，需要的朋友可以參考下2018-04-04
vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue中解決拖拽改變存在iframe的div大小時卡頓問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-07-07
vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家詳細介紹了Vue日期時間選擇器組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08