当前位置：首页 > web >正文

vue.js中的列表过滤+排序

web 2025/5/17 10:30:09

列表过滤

通过watch属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>body {padding: 20px;}</style></head><body><div id="app"><input type="text" v-model="value" placeholder="输入姓名" /><div style="margin-top: 20px;"><div v-for="(item,index) in filterPersons" :key="item.id"><span>{{item.name}}</span><span>-</span><span>{{item.age}}</span><span>-</span><span>{{item.gender}}</span></div></div></div></body><script>var vm = new Vue({el: '#app',data() {return {value: '',persons: [{id: 1,name: '张伟',age: 32,gender: '男'},{id: 2,name: '王芳',age: 28,gender: '女'},{id: 3,name: '李娜',age: 25,gender: '女'},{id: 4,name: '赵强',age: 40,gender: '男'},{id: 5,name: '刘洋',age: 30,gender: '男'},{id: 6,name: '陈静',age: 27,gender: '女'},{id: 7,name: '杨磊',age: 35,gender: '男'},{id: 8,name: '黄丽',age: 26,gender: '女'},{id: 9,name: '吴杰',age: 38,gender: '男'},{id: 10,name: '周敏',age: 29,gender: '女'}],filterPersons:[]}},watch: {value:{immediate:true,handler(newVal){this.filterPersons= this.persons.filter((item)=>{return item.name.includes(newVal)})console.log(newVal)}}}})</script>
</html>

通过computed

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>body {padding: 20px;}</style></head><body><div id="app"><input type="text" v-model="value" placeholder="输入姓名" /><div style="margin-top: 20px;"><div v-for="(item,index) in filterPersons" :key="item.id"><span>{{item.name}}</span><span>-</span><span>{{item.age}}</span><span>-</span><span>{{item.gender}}</span></div></div></div></body><script>var vm = new Vue({el: '#app',data() {return {value: '',persons: [{id: 1,name: '张伟',age: 32,gender: '男'},{id: 2,name: '王芳',age: 28,gender: '女'},{id: 3,name: '李娜',age: 25,gender: '女'},{id: 4,name: '赵强',age: 40,gender: '男'},{id: 5,name: '刘洋',age: 30,gender: '男'},{id: 6,name: '陈静',age: 27,gender: '女'},{id: 7,name: '杨磊',age: 35,gender: '男'},{id: 8,name: '黄丽',age: 26,gender: '女'},{id: 9,name: '吴杰',age: 38,gender: '男'},{id: 10,name: '周敏',age: 29,gender: '女'}],}},mounted() {},computed: {filterPersons() {return this.persons.filter((item) => {return item.name.includes(this.value)})}},})</script>
</html>

列表排序

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>body {padding: 20px;}</style></head><body><div id="app"><div><input type="text" v-model="value" placeholder="输入姓名" /><button @click="reserveAge(1)">年龄升序</button><button @click="reserveAge(2)">年龄降序</button><button @click="reserveAge(0)">重置</button></div><div style="margin-top: 20px;"><div v-for="(item,index) in filterPersons" :key="item.id"><span>{{item.name}}</span><span>-</span><span>{{item.age}}</span><span>-</span><span>{{item.gender}}</span></div></div></div></body><script>var vm = new Vue({el: '#app',data() {return {value: '',sortType:0,persons: [{id: 1,name: '张伟',age: 32,gender: '男'},{id: 2,name: '王芳',age: 28,gender: '女'},{id: 3,name: '李娜',age: 25,gender: '女'},{id: 4,name: '赵强',age: 40,gender: '男'},{id: 5,name: '刘洋',age: 30,gender: '男'},{id: 6,name: '陈静',age: 27,gender: '女'},{id: 7,name: '杨磊',age: 35,gender: '男'},{id: 8,name: '黄丽',age: 26,gender: '女'},{id: 9,name: '吴杰',age: 38,gender: '男'},{id: 10,name: '周敏',age: 29,gender: '女'}],}},mounted() {},methods:{reserveAge(type){this.sortType=type;},},computed: {filterPersons() {let arr= this.persons.filter((item) => {return item.name.includes(this.value)})if(this.sortType){arr.sort((a,b)=>{return this.sortType === 1? a.age-b.age:b.age-a.age})}return arr}},})</script>
</html>