分针网——每日分享:Vue2中ref属性的用法
2017-07-18 11:33
197 查看
本文转自:http://www.f-z.cn/id/229
最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组
// html<ul> <li ref="refCon">1</li> <li ref="refCon">2</li></ul>
// jscreated: function() { this.$nextTick(() => { console.log(this.$refs.refCon) // 打印结果:<li>2</li> 本以为会获得一个数组 })}
后来去看了下文档才搞明白orz。(没仔细看文档的锅
这下就明白了
// html<ul> <li v-for="item in people" ref="refContent">{{item}}</li></ul>
// jsdata: { people:['三姑','四婶','五叔','六姨','七舅姥爷']},created: function() { this.$nextTick(() => { console.log(this.$refs.refContent) })}
以及一定要注意
// jsdata: { people:['三姑','四婶','五叔','六姨','七舅姥爷']},created: function() { console.log(this.$refs.refContent) // undefined}
最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组
// html<ul> <li ref="refCon">1</li> <li ref="refCon">2</li></ul>
// jscreated: function() { this.$nextTick(() => { console.log(this.$refs.refCon) // 打印结果:<li>2</li> 本以为会获得一个数组 })}
后来去看了下文档才搞明白orz。(没仔细看文档的锅
这下就明白了
// html<ul> <li v-for="item in people" ref="refContent">{{item}}</li></ul>
// jsdata: { people:['三姑','四婶','五叔','六姨','七舅姥爷']},created: function() { this.$nextTick(() => { console.log(this.$refs.refContent) })}
以及一定要注意
// jsdata: { people:['三姑','四婶','五叔','六姨','七舅姥爷']},created: function() { console.log(this.$refs.refContent) // undefined}
相关文章推荐
- 分针网—每日分享:CSS 自定义属性:API 篇
- 分针网——每日分享:React语法基础之JSX
- 分针网——每日分享:一小时包教会 —— webpack 入门指南
- 分针网—每日分享:(基础篇)PHP与Web页面交互
- 分针网—每日分享:JavaScript-Ajax
- 分针网——每日分享:WEB 集群与负载均衡(一)基本概念-下
- 分针网—每日分享:css命名规范
- 分针网—每日分享:JavaScript学习笔记:数组的sort()和reverse()方法
- Vue2中ref属性的用法
- 分针网—每日分享: 利用js实现倒计时
- 分针网—每日分享: jquery ajax实例教程和一些高级用法
- 理解Vue 2.0 的ref属性及简单用法
- 分针网——每日分享:JavaScript严格模式
- 分针网——每日分享:React 语法之let和const命令
- 分针网——每日分享:网页布局时CSS无效的常见原因
- 分针网—每日分享: js时间戳和时间格式之间的转换
- 分针网——每日分享:in,typeof,instanceof,===运算符的作用
- 分针网——每日分享:Vue 指令总结
- 分针网——每日分享:Mongoose 一些查询方法
- 分针网—每日分享: jQuery动画的hover连续触发动画bug处理