Vue2中ref屬性的用法

最近寫東西遇到了莫名其妙的問題,用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ù)組
   })
}

后來去看了下文檔才搞明白o(hù)rz。(沒仔細(xì)看文檔的鍋

js01.png

這下就明白了

// 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)
    })
}
js02.png

以及一定要注意

// js
data: {
    people:['三姑','四嬸','五叔','六姨','七舅姥爺']
},
created: function() {
    console.log(this.$refs.refContent)
    // undefined
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,537評論 19 139
  • //Clojure入門教程: Clojure – Functional Programming for the J...
    葡萄喃喃囈語閱讀 4,036評論 0 7
  • 我出生在一個(gè)很普通傳統(tǒng)的家庭,不是單親,也沒有離異,更沒有家暴之類的恐怖事件發(fā)生。所以家里人對我的教育也很傳統(tǒng),...
    小崔崔崔崔閱讀 637評論 1 2
  • 憤怒來臨的時(shí)候 世界一瞬間安靜 下一秒,就是時(shí)間的破碎 指甲劃過鐵門 鋼筋戳破喉嚨 碎語像極了尖笑與咒罵 恨不得死...
    塵詩閱讀 178評論 0 0
  • 有次我和某家企業(yè)的高管團(tuán)隊(duì)開會(huì),討論一項(xiàng)新的商業(yè)計(jì)劃。當(dāng)我們順便聊到另一家公司的某個(gè)好的做法時(shí),這家企業(yè)的CEO突...
    劉遠(yuǎn)鑫閱讀 532評論 0 0

友情鏈接更多精彩內(nèi)容