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.post用法关于type设置问题补充
Jan 03 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 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实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
python模块之re正则表达式详解
2017/02/03 Python
基于python的字节编译详解
2017/09/20 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
详解flask入门模板引擎
2018/07/18 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python 追踪except信息方式
2020/04/25 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
课程改革实施方案
2014/03/16 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
退税申请报告怎么写
2015/05/18 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python