Vue：列表排序和筛选（运用计算属性和监视属性（侦听属性））
今日份更新，带大家初步了解一下计算属性和监视属性。
文章目录
一、计算属性（computed）vs监视属性（watch）
首先，带大家了解一下computed和watch的区别吧
1.computed能完成的功能，watch都可以完成
2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作
二、监视属性（watch）
感觉提到这种根据用户操作修改列表，大多数人应该都是想到根据什么变化然后渲染页面吧！
那么接下来，我就首先给大家来展示监视属性的写法吧！
第一步：构建主体架构
（1）引入vue.js,创建vue实例
<script src="../js/vue.js"></script>
const vm = new Vue({
el: "#root",
data: {
persons: [
{ id: 001, name: "周冬雨", age: 18, sex: "女" },
{ id: 002, name: "马冬梅", age: 19, sex: "女" },
{ id: 003, name: "周杰伦", age: 20, sex: "男" },
{ id: 004, name: "温兆伦", age: 21, sex: "男" },
],
},
})
（2）准备好html容器，将属性导入
<!-- 准备好一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<input type="text" v-model="obj.keyword" placeholder="请输入姓名">
<ul>
<li v-for="(k,index) in persons" :key="k.id">
{{k.name}}-{{k.age}}-{{k.sex}}
</li>
</ul>
</div>
这里说一下这个:key,在Vue非常重要的，是唯一标识符，大家先注意下，详细的后续单独出一期讲解。
第二步：完成列表筛选部分
（1）让输入框的value值和vue实例中的属性进行双向绑定
首先，在vue实例对象的data中添加一个属性，
data: {
obj: {
keyword: '',
},
},
然后，然输入框中的value值去绑定这个keyword属性，这样的话我们就是拿到用户输入的值,并根据用户提供的值及时渲染页面，
<input type="text" v-model="obj.keyword" placeholder="请输入姓名">
用v-model进行双向绑定。
（2）watch监视obj中keyword的变化
因为keyword在obj中，我们可以监视obj的变化，不过要开启深度监视。
这里进行筛选的时候，需要创建一个新数组，避免原数据被污染。
data: {
newarr: [],
},
watch: {
obj: {
immediate: true, // 初始化时让handler调用一下
deep: true, //开启深度监视
handler() {
this.newarr = this.persons.filter(item => item.name.indexOf(this.obj.keyword) != -1)
// 根据输入的名字进行筛选，有返回索引号，没有为-1
}
}
}
将v-for中的对象改变成遍历新数组
<li v-for="(k,index) in newarr" :key="k.id">
{{k.name}}-{{k.age}}-{{k.sex}}
</li>
第三步：完成列表排序部分
思路：通过按钮的点击事件来改变Vue实例里面的属性，再通过监视这个属性的变化来改变新数组。
创建一个新属性sortType来控制排序的方式。把这个属性放在obj中。
data: {
obj: {
keyword: '',
sortType: 0,
},
},
在html中添加三个按钮，并配置点击事件来改变sortType的值
<button @click="obj.sortType = 1">升序</button>
<button @click="obj.sortType = 2">降序</button>
<button @click="obj.sortType = 0">原序</button>
开始书写逻辑
排序主要是用sort来进行排序，注意一下不要弄反就行。
watch: {
obj: {
immediate: true,
deep: true,
handler() {
this.newarr = this.persons.filter(item => item.name.indexOf(this.obj.keyword) != -1)
if (this.obj.sortType) {
this.newarr.sort((a1, a2) => this.obj.sortType == 1 ? a1.age - a2.age : a2.age - a1.age)
} else {
this.newarr = this.persons
}
}
}
}
好了监视属性就讲到这里，接下来让我们来了解一下计算属性。
三、计算属性（computed）
计算属性属性本身不存在，是根据已有属性计算得来，这样的话可以避免我们创新声明一个新变量，
总思路相似，直接带大家来看看源码吧！
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>人员信息</h2>
<input type="text" v-model="keyword" placeholder="请输入姓名">
<input type="button" value="原序" @click="order=0">
<input type="button" value="降序" @click="order=1">
<input type="button" value="升序" @click="order=2">
<ul>
<li v-for="item in arrsort" :key="item.id">
姓名:{{item.name}} - 年龄:{{item.age}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
order: 0,
keyword: '',
persons: [
{ id: 01, name: "张三", age: 19 },
{ id: 02, name: "李四", age: 26 },
{ id: 03, name: "王五", age: 15 },
{ id: 04, name: "赵六", age: 20 },
]
},
computed: {
arrsort() {
const arr = this.persons.filter(item => item.name.indexOf(this.keyword) != -1)
if (this.order) {
arr.sort((item1, item2) => this.order == 1 ? item2.age - item1.age : item1.age - item2.age)
}
return arr
}
},
})
</script>
</body>
这里运用了一个计算属性的简写，而arrsort就是一个通过计算而得到的值，
四、效果图
这样一对比，好的多了，不是吗！
好了不开玩笑了，两者方法有利有弊，大家酌情选择哈！那我们下期再见！
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)