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 相关文章推荐
jQuery中index()方法用法实例
Dec 27 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
js调用网络摄像头的方法
Dec 05 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安全配置
2006/10/09 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
js调试工具Console命令详解
2014/10/21 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
JS随机密码生成算法
2019/09/23 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
Python实现定时精度可调节的定时器
2018/04/15 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
教师演讲稿大全
2014/05/16 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
班主任培训研修日志
2015/11/13 职场文书
导游词之太原天龙山
2020/01/02 职场文书
详解nginx进程锁的实现
2021/06/14 Servers