v-for指令
说起列表不得不提起循环，v-for指令便是可以在vue中实现循环的操作。
v-for指令是基于一个数组来重复渲染的指令，通常就用于显示列表和表格。
语法：
<ul v-for="(键,值,索引) in 数组">
<li>{{索引}}:{{值}}:{{键}}</li>
</ul>
例：
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
</style>
<!--遍历数据-->
<div id="app">
<!--item：键-->
<!--value：值-->
<!--index：下标-->
<ul v-for="(item,value,index) in people">
<li>{{index}}:{{value}}:{{item}}</li>
</ul>
</div>
<script src="js/Vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
text: "我们的征途是星辰大海！",
arr: ["玛卡巴卡", "唔西迪西", "小点点", "汤姆布利多", "叮叮车"],
people: {
id: 1,
name: "周润发",
age: 65
}
}
})
</script>
</body>
由例子可以看出，v-for指令不仅可以遍历字符串，数组，还可以遍历对象类型，根据键值和索引，以列表或者表格形式显示。
计算属性
一般在项目开发中，数据往往需要经过一些处理，除了利用基本的表达式和过滤器外，还可以使用vue的计算属性，优化程序以及完成复杂计算。
例：实现模糊筛选以及增加和删除。
首先通过v-for语句实现表格显示数据
<table class="table table-hover table-border">
<tr class="info">
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>介绍</th>
</tr>
<tr v-for="item in lists">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age+"岁"}}</td>
<td>{{item.show}}</td>
</tr>
</table>
<script>
new Vue({
el: "#app",
data: {
"lists": [{
"id": 1,
"name": "张三",
"age": 18,
"show": "张三介绍"
}, {
"id": 2,
"name": "李四",
"age": 19,
"show": "李四介绍"
}, {
"id": 3,
"name": "王五",
"age": 20,
"show": "王五介绍"
}, {
"id": 4,
"name": "赵六",
"age": 21,
"show": "赵六介绍"
}, {
"id": 5,
"name": "孙八",
"age": 22,
"show": "孙八介绍"
}]
}
</script>
使用计算属性实现模糊查询
<p><input type="text" v-model="selectkey" placeholder="请输入"></p>
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>
<input type="text" v-model="id" placeholder="请输入编号" class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon">姓名：</span>
<input type="text" v-model="name" placeholder="请输入姓名" class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon">年龄：</span>
<input type="text" v-model="age" placeholder="请输入年龄" class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon">信息：</span>
<input type="text" v-model="show" placeholder="请输入信息" class="form-control">
</p>
<p class="input-group">
<button @click="add()" class="btn btn-primary">添加信息</button>
</p>
<td> <button v-on:click="dels(item.id)" 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列表渲染内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！
您可能感兴趣的文章:
- Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
- VUEJS实战之构建基础并渲染出列表（1）
- 深入理解Vue 的条件渲染和列表渲染
- 详解vuejs之v-for列表渲染
- vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
- Vue列表页渲染优化详解
- Vue.JS入门教程之列表渲染
- Vue.js学习教程之列表渲染详解
- Vue.js列表渲染绑定jQuery插件的正确姿势
- Vue 监听列表item渲染事件方法
本文由 华域联盟 原创撰写：华域联盟 » Vue前端高效开发之列表渲染指令
转载请保留出处和原文链接：https://www.cnhackhy.com/73018.htm
