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学习笔记 nt-child的使用
Jan 17 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
如何使用原生Js实现随机点名详解
Jan 06 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 preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Python入门篇之对象类型
2014/10/17 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python中常见的异常总结
2018/02/20 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python中join()方法介绍
2018/10/11 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python音频处理的示例详解
2020/12/23 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
金融学专业大学生职业生涯规划
2014/03/07 职场文书
党风廉政承诺书
2014/03/27 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
公司租车协议书
2015/01/29 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
七年级思品教学反思
2016/02/20 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
JavaScript中isPrototypeOf函数
2021/11/07 Javascript