Vue的列表之渲染,排序,过滤详解
更新时间：2022年02月24日 16:42:20 作者：Tree_wws
这篇文章主要为大家详细介绍了Vue的列表之渲染,排序,过滤，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
1. 列表（渲染、排序、过滤）
1.1 条件渲染指令
有个小技巧：
如果是查找对象中不存在的属性，返回的是一个undefined，利用这一个点不管是v-show或者是v-if，如果值等于undefined的就不显示，假设sex属性不存在
<p v-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"
适用的场景：切换频率比较低的场景
template
最大的特点就是不破坏结构但是只能与 v-if 进行配合使用
1.1.3 v-if和v-show的小案例
<div id="root">
<h2>当前n的值为：{{n}}</h2>
<button @click="n++">点击我n加1</button>
<div class="box1" v-show = "true">你好啊！我是box1</div>
<div class="box1" v-show = "false">你好啊！我是box1</div>
<div class="box1" v-show="n === 1">你好啊！box1</div>
<div class="box2" v-if = "true">我是box2</div>
<div class="box2" v-if = "false">我是box2</div>
<div class="box2" v-if="n === 2">我是box2</div>
<!--
3. v-else-if , v-else , v-if 的区别
- v-if必须先写，才能写v-else和v-else-if
- 例如：
v-if
v-if
v-if
这样是进行3次判断
-------------------------------
v-if
v-else-if
v-else-if
v-else
只要有一个判断为真，下面的语句就不执行
----------------------------------
v-else
只要不满足v-if的条件就执行
-->
<div class="box3" v-if = "n===1">我是box31</div>
<div class="box3" v-else-if="n===1">我是box32</div>
<div class="box3" v-else-if = "n===3">我是box33</div>
<div class="box3" v-else>hhhhhhh</div>
//当满足条件的时候只输出满足条件的值，例如本例子输出为 ‘我是box31'
<!--
需求：当n == 2时，在页面输出5句话
4. template
- 最大的特点就是不破坏结构
- 但是只能和 v-if进行配合使用
-->
<template v-if="n === 2">
<h3>你好啊！</h3>
<h3>猜猜我是谁?</h3>
<h3>我是box4</h3>
<h3>你猜对了吗?</h3>
<h3>你真棒！</h3>
</template>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
n: 0,
}
})
</script>
1.1.4 v-for（key的原理）
特点：
1.可以遍历数组
2.可以遍历对象
3.可以遍历字符串
4.可以遍历次数（用的很少）
5.如果我们不写key，默认使用index
作用：用于展示列表的数据
语法：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.如果使用index作为key会引发以下的问题：
（1）如果发生逆序添加、逆序删除破坏了顺序操作就会产生没有必要的DOM更新而会造成达不到效果的问题
（2）如果输入结构包括了输入类的DOM元素，会产生更新问题比如：input的框的数据对不上等等
3.所以在开发的过程中key的使用最好是使用唯一能够标识的值作为key，比如id，Date.now(),nanoid这个包npm i nanoid等等
1.2 列表过滤
使用computed
<div id="root">
<input type="text" placeholder="请输入关键字" v-model="keyword">
<br>
<ul>
<li v-for="value in filtername" :key="value.id" >
{{value.name}} -- {{value.age}} -- {{value.gender}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
arr: [
{ id: "001", name: "马冬梅", age: 18, gender: "female" },
{ id: "002", name: "周冬雨", age: 55, gender: "female" },
{ id: "003", name: "周杰伦", age: 30, gender: "male" },
{ id: "004", name: "郭艾伦", age: 30, gender: "male" },
{ id: "005", name: "郭德纲", age: 30, gender: "male" },
],
keyword:""
},
computed:{
filtername:{
get(){
return this.arr.filter((currentval)=>{
return currentval.name.indexOf(this.keyword) !== -1
})
}
}
}
})
</script>
使用watch
<div id="root">
<input type="text" placeholder="请输入关键字" v-model="keyword">
<br>
<ul>
<li v-for="value in filearr" :key="value.id" >
{{value.name}} -- {{value.age}} -- {{value.gender}}
</li>
</ul>
</div>
<script>
/* 分享一个数组去重的方法
var arr = [1,35,612,6546,1,51]
var newarr = arr.filter((val,index)=>{
return arr.indexOf(val,0) === index
})
console.log(newarr);
filter(function(current,index,arr){return xxx})
- return : 写的是过滤的条件
- 返回的是满足条件的元素
indexOf:
- 第一个参数是：要查询的元素
- 第二个参数是：开始索引的位置
- 它返回的值是当前元素的索引值，如果没有要查询的元素返回的是-1
*/
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
arr: [
{ id: "001", name: "马冬梅", age: 18, gender: "female" },
{ id: "002", name: "周冬雨", age: 55, gender: "female" },
{ id: "003", name: "周杰伦", age: 30, gender: "male" },
{ id: "004", name: "郭艾伦", age: 30, gender: "male" },
{ id: "005", name: "郭德纲", age: 30, gender: "male" },
],
keyword:'',
filearr:[]
},
/*
需求：当输入某一个关键字，输出相关的内容
思路：
1. 获取到用户输入的数据
2. 筛选输入的关键字是否在数据里面
*/
// 先用watch写
watch:{
keyword:{
immediate:true,
handler(newval,oldval){
this.filearr = this.arr.filter((currentval)=>{
return currentval.name.indexOf(newval) !== -1
/*
这里有个细节：indexOf去判断 空字符串（不是空格） 时会返回0，
所以整个列表都会出来
例如："asdf".indexOf("") 返回的是0
所以需要向自调用一次使用immediate
*/
})
}
}
}
})
</script>
1.3 列表排序
<div id="root">
<h2>人员排序</h2>
<input type="text" placeholder="请输入关键字" v-model="keyword">
<button @click="type = 2">年龄升序</button>
<button @click="type = 1">年龄降序</button>
<button @click="type = 0">原顺序</button>
<ul>
<li v-for="val in filtername" :key="val.id">
{{val.name}} -- {{val.age}} -- {{val.gender}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
arr: [
{ id: "001", name: "马冬梅", age: 18, gender: "female" },
{ id: "002", name: "周冬雨", age: 55, gender: "female" },
{ id: "003", name: "周杰伦", age: 50, gender: "male" },
{ id: "004", name: "郭艾伦", age: 59, gender: "male" },
{ id: "005", name: "郭德纲", age: 30, gender: "male" },
],
keyword:"",
type:0
},
computed:{
filtername:{
get(){
let arr = this.arr.filter((current)=>{
return current.name.indexOf(this.keyword) !== -1
})
arr.sort((a,b)=>{
/*
a永远在b前面
如果返回的值是大于0则交换位置，小于等于0不交换位置
return a-b 升序
return b-a 降序
*/
if(this.type)
{
return this.type == 1 ? b.age - a.age : a.age - b.age
}
})
return arr
}
}
}
})
</script>
总结
以上就是今天要讲的内容，本文介绍了和列表（渲染、排序、过滤）相关的知识，希望对大家有所帮助！
相关文章
本文分步骤给大家介绍了基于vue cli重构多页面脚手架过程，非常不错，具有参考借鉴价值，需要的朋友参考下2018-01-01
这篇文章主要介绍了vue+egg+jwt实现登录验证的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了antd vue表格可编辑单元格以及求和实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue跨端渲染实现多端无缝衔接，Vue跨端渲染是一种基于Vue框架的跨平台开发技术，能够实现Web、iOS和Android三端的无缝衔接，提高开发效率和用户体验2023-05-05
axios无法加载响应数据:no data found for resource with given i
最近在在做一个小查询功能的时候踩了一个坑,所以这篇文章主要给大家介绍了关于axios无法加载响应数据:no data found for resource with given identifier报错的解决方法,需要的朋友可以参考下2022-11-11
前端开发中,随着业务的增多,出于效率的考虑,我们对于组件化开发的需求也越来越迫切。下面这篇文章主要给大家介绍了关于vue.js之UI组件开发的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-07-07
Vue+elementUI el-input输入框手机号校验功能
这篇文章主要介绍了Vue+elementUI el-input输入框手机号校验功能,限制input框内只能输入数字,且为11位,通过实例代码介绍了对输入手机号做校验的方法,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了vue父组件监听子组件数据更新方式(hook)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue中手动封装iconfont组件解析(三种引用方式的封装和使用)
这篇文章主要介绍了vue中手动封装iconfont组件(三种引用方式的封装和使用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了Vue3实现地图选点组件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
最新评论