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


Posted in Javascript onJune 12, 2017

发现问题

最近写东西遇到了莫名其妙的问题,用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。(没仔细看文档的锅

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

正确使用方法

这下就明白了

// 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)
 })
}

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

以及一定要注意

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

总结

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

Javascript 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
Vue实现购物车功能
Apr 27 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 #Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
AngularJS自定义指令详解(有分页插件代码)
Jun 12 #Javascript
前端构建工具之gulp的语法教程
Jun 12 #Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 #Javascript
微信小程序 自定义Toast实例代码
Jun 12 #Javascript
Angular4 中常用的指令入门总结
Jun 12 #Javascript
You might like
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
JS轮播图的实现方法2
2020/08/25 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python和php哪个更适合写爬虫
2020/06/22 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
提高EJB性能都有哪些技巧
2012/03/25 面试题
留学自荐信
2013/10/10 职场文书
就业自我评价
2014/02/04 职场文书
目标责任书格式
2014/07/28 职场文书
个人简历求职信范文
2015/03/20 职场文书
JavaScript组合继承详解
2021/11/07 Javascript