源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Vue 2中ref属性的使用方法及注意事项

  • 时间:2022-07-29 05:27 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Vue 2中ref属性的使用方法及注意事项
[b]发现问题[/b] 最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组
// html
<ul>
  <li ref="refCon">1</li>
  <li ref="refCon">2</li>
</ul>
// js
created: function() {
  this.$nextTick(() => {
    console.log(this.$refs.refCon) 
    // 打印结果:<li>2</li> 本以为会获得一个数组
   })
}
后来去看了下文档才搞明白orz。(没仔细看文档的锅 [img]http://files.jb51.net/file_images/article/201706/2017612115117472.png?2017512115124[/img] [b]正确使用方法[/b] 这下就明白了
// 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)
 })
}
[img]http://files.jb51.net/file_images/article/201706/2017612115200864.png?201751211528[/img] [b]以及一定要注意[/b]
// js
data: {
 people:['三姑','四婶','五叔','六姨','七舅姥爷']
},
created: function() {
 console.log(this.$refs.refContent)
 // undefined
}
[b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部