vue指令之v-for和key属性
2018-09-19 16:15
537 查看
data: { list:[1,2,3,4,5,6], listObj:[ { id:1,name:'张三' }, { id:2,name:'李四' }, { id:3,name:'王五' }, { id:4,name:'你好' } ], user: { id:1, name:'linyan', gender:'男' } }
循环遍历普通数组
<p v-for="item in list">{{item}}</p> <p v-for="(item,i) in list">索引值:{{i}}-----每一项:{{item}}</p>[/code]
循环对象数组
<p v-for="item in listObj">{{item.id}}----{{item.name}}</p>
循环遍历对象
<p v-for="(val,key) in user">值:{{val}}----键:{{key}}</p> <p v-for="(val,key,i) in user">值:{{val}}----键:{{key}}----{{i}}</p>[/code]
in 后面放普通数组,对象数组,对象,还可以放数字,如果从v-for迭代数字的话,前面的count从1开始
<p v-for="count in 10">这是第{{count}}次循环</p>[/code] 阅读更多
相关文章推荐
- Vue2.0中 v-for指令中的key用法
- 图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法
- Vue.js常用指令汇总(v-if//v-show//v-else//v-for//v-bind//v-on等)
- iOS 监听控件某个属性的改变observeValueForKeyPath
- 关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
- Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
- vue.js指令v-for使用以及下标索引的获取
- vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
- vue v-for指令
- Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式
- VSCode打开vue项目的vue组件提示错误的解决办法及key属性的作用
- Vue.js常用指令汇总(v-if、v-for等)
- Vue1.0学习总结(1)———指令、事件、绑定属性、模板、过滤器
- ios-day06-03(UITableView的索引条、一个对象作为另一个对象的属性、valueForKey和valueForKeyPath的区别)
- Missing space before value for key 'path'vue.js解决空格报错
- Vue实践--V-for指令
- 关于vue v-for 嵌套v-for的v-model属性绑定问题
- vue指令之v-for
- Vue中的v-for指令不起效果的解决方法