vue渲染函数实战,vue条件渲染指令
本文主要介绍Vue前端高效开发的列表渲染指令的相关信息。vue.js使用v-for指令处理组件元素的循环迭代逻辑。本文通过示例代码非常详细的介绍了一下，有需要的朋友可以参考一下。
v-for指令
说到不得不提循环的列表，v-for指令就是vue中可以实现循环的操作。
V-for指令是基于数组重复渲染的指令，通常用于显示列表和表格。
语法：
Ul v-for=(键，值，索引)在数组中
Li { { index } }:{ { value } }:{ { key } }/Li
/ul
示例：
身体
风格
* {
边距：0px
填充：0px
}
ul {
列表样式：无；
}
/风格
！-遍历数据-
div id=应用程序
！-物品：钥匙-
！-价值：价值-
！-索引：下标-
ul v-for=(项目，值，指数)以人计
Li { { index } }:{ { value } }:{ { item } }/Li
/ul
/div
script src=js/Vue.js/script
脚本
新Vue({
埃尔： #app ，
数据：{
正文：“我们的旅程是星辰大海！”,
Arr: [马卡巴卡，井西德西，小点点，汤姆邓布利多，叮叮车]，
人员：{
id: 1，
姓名：“周润发”，
年龄：65岁
}
}
})
/脚本
/body
从例子中可以看出，v-for指令不仅可以遍历字符串和数组，还可以遍历对象类型，并根据键值和索引以列表或表格的形式显示。
计算属性
在一般的项目开发中，经常需要处理数据。除了使用基本表达式和过滤器，还可以使用vue的计算属性来优化程序，完成复杂的计算。
示例：实现模糊过滤、添加和删除。
首先用v-for语句实现表格显示数据。
table class= table table-悬停表格-边框
tr class=信息
第个数字/第
Th名称/th
Th年龄/th
Th介绍/th
/tr
tr v-for=列表中的项目
td{{item.id}}/td
td{{item.name}}/td
Td{{item.age 岁 }}/td
td{{item.show}}/td
/tr
/表格
脚本
新Vue({
埃尔： #app ，
数据：{
列表:[{
id: 1，
姓名：张三:
年龄：18岁，
秀》:《张三简介》
}, {
id: 2，
姓名:李四，
年龄：19岁，
秀》:《李斯简介》
}, {
id: 3，
姓名:王武，
年龄:20，
节目：《王五简介》
}, {
id: 4，
姓名:刘钊，
年龄：21岁，
节目：《刘钊简介》
}, {
id: 5，
姓名:孙霸:
年龄：22岁，
《秀》:《孙巴传》
}]
}
/脚本
利用计算属性实现模糊查询
pin type= text v-model= select key placeholder= please enter /p
计算值：{
新列表：函数(){
var _ this=this
return _ this . lists . filter(function(val){
return val . name . index of(_ this . select key)！=-1;
})
}
}
将计算出的属性以函数的形式写入computed选项，将v-for语句遍历的集合改为过滤后的newlist集合，通过判断字符串中是否有子字符串来过滤列表集合中的数据，然后将过滤后的数据展示给v-for遍历。
添加和删除
p class=输入组
Class= input-group-addon 编号：/span
type= text v-model= id placeholder=请输入数字 class=form-control
/p
p class=输入组
class= input-group-addon Name:/span
type= text v-model= name placeholder=请输入一个名称 class=form-control
/p
p class=输入组
年龄：/span
type= text v-model= age placeholder=请输入年龄 class=form-control
/p
p class=输入组
input-group-addon 信息：/span
type= text v-model= show placeholder=请输入信息 class=form-control
/p
p class=输入组
按钮@ click= Add() class= btnbtn-primary 添加信息/按钮
/p
任务描述
按钮v-on:click= dels(item . id) class= btnbtn-primary 删除/按钮
/td
方法：{
add: function() {
var girl={
id: this.id
name: this.name，
年龄:这个年龄，
show: this.show
}
this.lists.push(少女)；
},
dels:函数(o) {
//删除的是下标。删除一些
for(设I=0；I this . lists . length；i ) {
如果(this.lists[i].id==o) {
拼接(I，1)；
}
}
}
}
通过绑定事件的方法，添加了两个按钮事件方法add和dels来处理添加和删除操作。
添加是使用push方式进行添加和删除。这里的拼接方法只能用下标删除，传递的值是id。所以为了保证正确性，需要循环判断下标并删除。
这是计算属性。用于处理数据。
监听属性
除了计算属性，vue还提供了用于处理数据和观察数据变化的监控属性。
不同的是，listening属性需要两个参数，一个是当前值，一个是更新值。
示例：
观察：{
first:函数(val) {
this.full=val this.last
},
最后：函数(值){
this.full=this.first val
}
}
计算属性与监听属性相比，明显优于监听属性，建议在非特殊情况下优先使用计算属性。
总结
关于Vue前端高效开发的列表渲染说明这篇文章到此为止。更多相关Vue列表渲染内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。