Vue前端高效开发之列表渲染指令
更新时间：2021年06月27日 08:29:54 作者：PROBIE_
这篇文章主要给大家介绍了关于Vue前端高效开发之列表渲染指令的相关资料,vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
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列表渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中的基础过渡动画原理解析,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了vue用vis插件如何实现网络拓扑图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题
这篇文章主要介绍了vue-router next(false) 禁止访问某个页面时,不保留历史访问记录问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了如何解决Element UI中NavMenu折叠菜单的坑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
我们知道，Vite 构建环境分为开发环境和生产环境，不同环境会有不同的构建策略，但不管是哪种环境，Vite 都会首先解析用户配置，那接下来，本文就来与大家分析配置解析过程中 Vite 到底做了什么？即Vite是如何加载配置文件的2023-11-11
在vue项目中使用codemirror插件实现代码编辑器功能
这篇文章主要介绍了在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
基于vue+elementPlus的动态导航标签栏tabs具体过程
这篇文章主要给大家介绍了关于基于vue+elementPlus的动态导航标签栏tabs的相关资料,本文主要详述了在系统上添加导航标签栏功能时,首次尝试的过程,并且希望能为同行提供一个小demo,需要的朋友可以参考下2024-10-10
今天整了一个项目,试了下打包,发下打包后只生成了一个css文件,和一个js文件,这样肯定是不行的,因为这样这个文件的包大小很大,第一次访问会导致白屏问题,所以本文给大家介绍了vite打包只生成了一个css和js文件问题的解决方法,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue+springmvc导出excel数据的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了在pycharm中开发vue的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论