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

发现问题

目前创新互联已为近千家的企业提供了网站建设、域名、雅安服务器托管网站托管运营、企业网站设计、麻山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组

// html
      
  • 1
  •   
  • 2
// js created: function() {   this.$nextTick(() => {     console.log(this.$refs.refCon)     // 打印结果:
  • 2
  • 本以为会获得一个数组    }) }

    后来去看了下文档才搞明白orz。(没仔细看文档的锅

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

    正确使用方法

    这下就明白了

    // html
    
    • {{item}}
    // js
    data: {
     people:['三姑','四婶','五叔','六姨','七舅姥爷']
    },
    created: function() {
     this.$nextTick(() => {
      console.log(this.$refs.refContent)
     })
    }

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

    以及一定要注意

    // js
    data: {
     people:['三姑','四婶','五叔','六姨','七舅姥爷']
    },
    created: function() {
     console.log(this.$refs.refContent)
     // undefined
    }

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对创新互联的支持。


    本文名称:Vue2中ref属性的使用方法及注意事项
    网页地址:http://hxwzsj.com/article/jpschp.html

    其他资讯

    Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
    友情链接: 成都定制网站建设 网站建设方案 成都网站建设 营销型网站建设 成都网站制作 成都网站建设流程 成都营销网站建设 成都网站建设 做网站设计 定制网站制作 高端网站建设 成都网站建设 成都网站建设推广 网站制作 网站建设 成都网站建设 手机网站设计 成都商城网站制作 定制网站建设多少钱 成都网站建设 移动手机网站制作 成都网站设计