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 相关文章推荐
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
js实现购物车功能
Jun 12 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
vue实现图书管理系统
Dec 29 Vue.js
深究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
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
python实现随机漫步方法和原理
2019/06/10 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
django序列化serializers过程解析
2019/12/14 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python实现弹球小游戏
2020/08/01 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
计算机大学生的自我评价
2013/10/15 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
委托书范本
2014/04/02 职场文书
芙蓉镇观后感
2015/06/10 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书