这篇文章主要给大家介绍了关于Vue前端高效开发之列表渲染指令的相关资料,vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
v-for指令
说起列表不得不提起循环，v-for指令便是可以在vue中实现循环的操作。
v-for指令是基于一个数组来重复渲染的指令，通常就用于显示列表和表格。
语法：
- {{索引}}:{{值}}:{{键}}
例：
* { margin: 0px; padding: 0px; } ul { list-style: none; } <!--遍历数据--><div id="app"> <!--item：键--><!--value：值--><!--index：下标--><ul> <li>{{index}}:{{value}}:{{item}}</li></ul></div>
由例子可以看出，v-for指令不仅可以遍历字符串，数组，还可以遍历对象类本文来源gao($daima.com搞@代@#码(网5型，根据键值和索引，以列表或者表格形式显示。
计算属性
一般在项目开发中，数据往往需要经过一些处理，除了利用基本的表达式和过滤器外，还可以使用vue的计算属性，优化程序以及完成复杂计算。
例：实现模糊筛选以及增加和删除。
首先通过v-for语句实现表格显示数据
<table class="table table-hover table-border"> <tr class="info"> <th>编号</th><th>姓名</th><th>年龄</th><th>介绍</th></tr><tr> <td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age+"岁"}}</td><td>{{item.show}}</td></tr></table>
使用计算属性实现模糊查询
computed: { newlist: function() { var _this = this; return _this.lists.filter(function(val) { return val.name.indexOf(_this.selectkey) != -1; }) } }
把计算属性以函数形式写到computed选项中，将v-for语句遍历的集合改为筛选后的newlist集合，通过判断字符串中是否存在子字符串筛选lists集合中的数据，再把筛选后的数据交给v-for遍历显示。
实现添加及删除
<p class="input-group"> <span class="input-group-addon">编号：</span></p><p class="input-group"> <span class="input-group-addon">姓名：</span></p><p class="input-group"> <span class="input-group-addon">年龄：</span></p><p class="input-group"> <span class="input-group-addon">信息：</span></p><p class="input-group"> <button class="btn btn-primary">添加信息</button></p>
<td> <button class="btn btn-primary">删除</button></td>
methods: { add: function() { var girl = { "id": this.id, "name": this.name, "age": this.age, "show": this.show } this.lists.push(girl); }, dels: function(o) { //删除的是下标，删除几个 for (let i = 0; i <this.lists.length; i++) { if (this.lists[i].id == o) { this.lists.splice(i, 1); } } } }
通过methods绑定事件，添加两个按钮事件方法add和dels用于处理添加和删除操作。
添加就是使用push方法添加，删除这里的splice方法仅能通过下标删除，而传过来的值是id所以这里为了确保正确性就需要循环判断下标，进行删除操作。
这就是计算属性。用于处理数据。
监听属性
vue除了计算属性还提供了监听属性用于处理数据，用于观察数据变动。
不同的是监听属性需要有两个形参，一个是当前值，一个是更新后的值。
例：
watch: { first: function (val) { this.full = val + ' ' + this.last }, last: function (val) { this.full = this.first + ' ' + val } }
相比于监听属性，明显计算属性会优于监听属性，所以在非特殊情况下，还是推荐优先使用计算属性。
总结
到此这篇关于Vue前端高效开发之列表渲染指令的文章就介绍到这了,更多相关Vue列表渲染内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是Vue前端高效开发之列表渲染指令的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue前端高效开发之列表渲染指令
