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选择器原理介绍($()使用方法)
Mar 25 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
es6中比较有用的7个技巧小结
Jul 12 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
15种PHP Encoder的比较
2007/04/17 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python IDLE入门简介
2017/12/08 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
关于旅游的活动方案
2014/08/15 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
批评与自我批评总结
2014/10/17 职场文书
信访工作汇报材料
2014/10/27 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server