vue列表排序功能,vue递归渲染
本文主要详细介绍了Vue的列表的渲染、排序和过滤。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.列表(渲染、排序、过滤)1.1条件渲染指令1.1.1 v-show1.1.2 v-if1.1.3 v-if和小例v-show 1.1.4 V-for(键的原理)1.2列表过滤1.3列表排序汇总
1. 列表（渲染、排序、过滤）
1.1 条件渲染指令
有个小技巧：
如果是查找对象中不存在的属性，返回的是一个undefined，利用这一个点不管是v-show或者是v-if，如果值等于undefined的就不显示，假设sex属性不存在
P-show= student.sex 性别：{{student.sex}}/p
1.1.1 v-show
1.v-show的原理：通过display: none隐藏元素，满足条件时移除display: none样式。
2.适用场景：切换频率高的场景。
3.使用v-show隐藏元素时，可以得到，v-if不能。
1.1.2 v-if
1.V-IF的原理：去掉整个节点，条件满足时再添加节点。
2.v-else和v-else-if需要和v-if一起使用，但不能破坏结构。
必须要先写v-if，例如：
v-if=xxx
v-else=xxx
-
v-if=xxx
v-else-if=xxx
v-else=xxx
适用场景：切换频率低的场景。
模板
最大的特点是不破坏结构，但只能用v-if。
1.1.3 v-if和v-show的小案例
div id=root
h2n的当前值为：{{n}}/h2
button @ Click= n Click me n plus 1/button
Div= box1 v-show= true 喂！我是box1/div
Div= box1 v-show= false 你好！我是box1/div
你好！方框1/格
我是box2/div
我是box2/div
我是box2/div
！-
3.V-else-if，V-else和V-if的区别
-v-if必须写在v-else和v-else-if之前。
-例如：
控制显示
控制显示
控制显示
这是做三个判断。
-
控制显示
如果，否则
如果，否则
v-否则
只要其中一个判断为真，下面的语句就不会被执行。
-
v-否则
只要不满足v-if的条件就执行。
-
我是box31/div
我是box32/div。
我是box33/div。
div class= box 3 v-elsehhhhhhh/div
//满足条件时，只输出满足条件的值。例如，此示例输出“我是box31”
！-
要求：当n==2时，在页面上输出5个句子。
4.模板
-最大的特点是不破坏结构。
-但只能和v-if一起用。
-
模板v-if=n===2
H3:你好！/h3
H3猜猜我是谁？/h3
H3我是盒子4/h3。
H3，你没事吧？/h3
H3，你太棒了！/h3
/模板
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
n: 0，
}
})
/脚本
1.1.4 v-for（key的原理）
特点：
1.你可以遍历数组。
2.可以遍历对象。
3.你可以遍历字符串。
4.可以遍历的次数(很少使用)
5.如果我们不写键，我们默认使用索引
作用:用于显示列表的数据
语法:v-for=(item，index) in xxx :key=yyy
key的原理：(非常重要)
1.虚拟DOM中key的作用：
Key是虚拟DOM对象的标识符。当数据发生变化时，Vue会根据新的数据生成一个新的虚拟DOM，然后Vue会比较新的虚拟DOM和旧的虚拟DOM的差异。比较规则如下：
(1).旧虚拟DOM中的找到和新虚拟DOM中的相同的key:
如果虚拟DOM中的内容没有变化，直接使用之前的真实DOM。
如果虚拟DOM中的内容发生变化，则生成新的真实DOM，然后替换页面中之前的真实DOM。
(2)旧虚拟DOM中的未找到和新虚拟DOM中的相同的key直接新建一个真实DOM，然后渲染到页面上。
2.如果使用索引作为关键字，将会导致以下问题：
(1)如果逆序添加和逆序删除破坏了顺序操作，会有不必要的DOM更新，造成效果达不到的问题。
(2)如果输入结构包含输入类的DOM元素，就会出现更新问题，比如输入框的数据不匹配等等。
3.所以在开发过程中，最好使用唯一可识别的值作为key，比如id，Date.now()，nanoid，这个包npm i nanoid等等。
1.2 列表过滤
使用computed
div id=root
Type= text placeholder=请输入关键字 v-model=keyword
英国铁路公司
保险商实验所
Li v-for= filtername中的值:key=value.id
{ {数值.姓名}}-{ {数值.年龄} }-{ {数值.性别} }
/李
/ul
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
arr: [
{id: 001 ，姓名： 马冬梅，年龄：18，性别：女 }，
{id: 002 ，姓名： 周冬雨，年龄：55，性别：女 }，
{id: 003 ，姓名： 周杰伦，年龄：30，性别：男 }，
{id: 004 ，姓名： 郭，年龄：30，性别：男 }，
{id: 005 ，姓名： 郭德纲，年龄：30，性别：男 }，
],
关键字：“”
},
计算值：{
过滤器名称：{
get(){
返回this.arr.filter((currentval)={
return current val . name . index of(this . keyword)！==-1
})
}
}
}
})
/脚本
使用watch
div id=root
Type= text placeholder=请输入关键字 v-model=keyword
英国铁路公司
保险商实验所
Li v-for= value in filearr :key= value . id
{ {数值.姓名}}-{ {数值.年龄} }-{ {数值.性别} }
/李
/ul
/div
脚本
/*共享阵列重复数据消除方法
var arr=[1，35，612，6546，1.51]
var newarr=arr.filter((val，index)={
return arr.indexOf(val，0)===index
})
console . log(new arr)；
filter(函数(current，index，arr){return xxx})
-return:写过滤条件。
-返回符合条件的元素。
索引：
-第一个参数是：要查询的元素
-第二个参数是：索引开始的位置。
-它返回的值是当前元素的索引值，如果没有要查询的元素，则为-1。
*/
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
arr: [
{id: 001 ，姓名： 马冬梅，年龄：18，性别：女 }，
{id: 002 ，姓名： 周冬雨，年龄：55，性别：女 }，
{id: 003 ，姓名： 周杰伦，年龄：30，性别：男 }，
{id: 004 ，姓名： 郭，年龄：30，性别：男 }，
{id: 005 ，姓名： 郭德纲，年龄：30，性别：男 }，
],
关键词：，
filearr:[]
},
/*
要求：当输入某个关键字时，会输出相关内容。
想法：
1.获取用户输入的数据。
2.过滤输入关键字是否在数据中。
*/
//先用手表写
观察：{
关键词：{
即时：真的，
处理程序(newval，oldval){
这个。文件arr=this。由…改编过滤器((当前值)={
返回电流值。姓名。(新值)的索引！==-1
/*
这里有个细节：索引关于去判断空字符串（不是空格)时会返回0,
所以整个列表都会出来
例如： asdf .的索引("")返回的是0
所以需要向自调用一次使用马上
*/
})
}
}
}
})
/脚本
1.3 列表排序
div id=root
氘人员排序/h2
输入类型=text placeholder=请输入关键字v-model=keyword
按钮@click=type=2 年龄升序/按钮
button @click=type=1 年龄降序/按钮
button @click=type=0 原顺序/按钮
保险商实验所
Li v-for= val in filtername :key= val。id
{ {瓦尔。name } }-{ { val。年龄} }-{ { val。性别} }
/李
/ul
/div
脚本
Vue.config.productionTip=false
让vm=新Vue({
el: #root ，
数据：{
arr: [
{ id: 001 ，名称： 马冬梅，年龄：18,性别：女},
{ id: 002 ，名称： 周冬雨，年龄：55,性别：女},
{ id: 003 ，名称： 周杰伦，年龄：50,性别：男},
{ id: 004 ，名称： 郭艾伦，年龄：59,性别：男},
{ id: 005 ，名称： 郭德纲，年龄：30,性别：男},
],
关键词：,
类型：0
},
计算值：{
过滤器名称：{
get(){
设arr=this.arr.filter(当前)={
返回当前。姓名。的索引。关键词)！==-1
})
arr.sort((a，b)={
/*
a永远在b前面
如果返回的值是大于0则交换位置，小于等于0不交换位置
返回美国罗克韦尔升序
返回电离真空计降序
*/
if(this.type)
{
返回这个. type==1？年龄年龄年龄
}
})
返回arrive）
}
}
}
})
/脚本
总结
以上就是今天要讲的内容，本文介绍了和列表（渲染、排序、过滤)相关的知识，希望对大家有所帮助！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。