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-04Vue利用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-09Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue
這篇文章主要介紹了Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09Vue-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-07Vue項(xiàng)目分環(huán)境打包的實(shí)現(xiàn)步驟
這篇文章主要介紹了Vue項(xiàng)目如何分環(huán)境打包,實(shí)現(xiàn)方法大概分為六步驟,需要的朋友可以參考下2018-04-04vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue中解決拖拽改變存在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-07vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04