vue v-for 数据处理
来源:互联网 发布:机房网络拓扑图 编辑:程序博客网 时间:2024/06/05 19:42
v-for的基本使用
使用 v-for="item in list" 或者 v-for="item of list" 进行遍历
使用list:list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}] 时为了方便扩展, 更贴近实际项目需求。
<div id="app"> <ul> <li v-for="item in list">{{item.n}}</li> </ul> </div> </body> <script> var app=new Vue({ el:'#app', data:{ list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}] } }) </script>
v-for 给了两个参数 key 和 index
这里需要对遍历的数据 分为 数组 和 对象分别对待
数组下是没有 key值的
而对象下可以得到参数key值 实际显示效果如下:
<div id="app"> <ul> <li v-for="(item,index,key) of list">{{item.n}} <div>index={{ index }}</div> <div>key={{key}}</div> </li> </ul> <div> <div v-for="(item,key,index) of obj"> {{item}}:{{key}}:{{index}} </div> </div> </div> </body> <script> var app=new Vue({ el:'#app', data:{ list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}], obj:{color:'red',age:18,sex:'girl'} } }) </script>
v-for支持等数迭代
v-for="n in 10"
借助这个可以分步加载 数据,控制m值就行了
<div v-for="i of m"> {{list[i-1].n}} </div> </div> </body> <script> var app=new Vue({ el:'#app', data:{ m:3, list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}], obj:{color:'red',age:18,sex:'girl'} } }) </script>
注意:
遍历对象时使用不能this绑定组件,只能在处理函数中传入index 或其他的一些特征值来对当前list选定,再进行操作。
<ul> <li v-for="(item,index,key) of list">{{item.n}} <div>index={{ index }}</div> <div>key={{key}}</div> <div v-on:click="removethis(index)">remove this</div> </li> </ul>
methods:{ removethis:function(index){ this.list.splice(index,1)
对data 的数组app.list[1]={n:33}直接赋值操作不能触发页面更新
所以vue js 提供了Vue.set(app.list,1,{n:33})的数组数据更新方法
0 0
- vue v-for 数据处理
- vue v-for v-if
- vue v-for详解
- vue v-for 嵌套
- Vue常用指令v-for
- vue的v-for使用
- Vue v-for 的反面教材。
- vue v-for数组倒序
- vue.js之v-for
- vue v-for 循环对象
- Vue实践--V-for指令
- vue v-for 样式赋值
- VUE条件渲染(v-if v-show v-for)
- vue学习01--v-bind:title/v-if/v-for
- Vue.js实践-v-for注意事项
- vue.js列表输出v-for
- Vue中v-for的数据分组
- Vue.js中的列表渲染:v-for
- iOS常用宏定义总结 --Objective-C
- BootStrap datetimepicker使用
- 中国首家完美支持windows 2016 server系统的生产力级CMS
- jsp和servlet
- sparkR程序
- vue v-for 数据处理
- $_SERVER[]:包含一些诸如头信息,路径和脚本等信息的数组。
- 2005右键修改存储过程变成动态脚本及 2014 无法生产drop时的判断脚本
- Touch screen
- SpringDataJPA学习记录(一)--环境配置
- 第12周 oj 逆序输出
- Angular2 Directive 学习笔记-基础篇
- ListView的几种特殊属性
- 字符串的一些php操作