文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue如何实现列表过滤与排序

2023-06-30 16:17

关注

这篇文章主要讲解了“Vue如何实现列表过滤与排序”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue如何实现列表过滤与排序”吧!

一、数据过滤

watch实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Vue初识</title>    <script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root">    <!--遍历数组-->    <h3>人员列表(遍历数组)</h3>    <input type="text" placeholder="请输入名字" v-model="keyword"/>    <ul>        <li v-for="(p,index) in filterPersons" :key="p.id">            {{p.name}}--{{p.age}}---{{p.sex}}        </li>    </ul></div><script type="text/javascript">    Vue.config.productionTip = false    //创建vue实例    new Vue({        el: "#root",        data: {            keyword: '',            persons: [                {id: 1, name: "马冬梅", age: 18, sex: "女"},                {id: 2, name: "周冬雨", age: 19, sex: "女"},                {id: 3, name: "周杰伦", age: 20, sex: "男"},                {id: 4, name: "温兆伦", age: 21, sex: "男"},            ],            filterPersons: []        },        watch: {            keyword: {                immediate: true,                handler(val) {                    this.filterPersons = this.persons.filter((p) => {                        return p.name.indexOf(val) !== -1                    })                }            }        }    })</script></body></html>

computed 实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Vue初识</title>    <script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root">    <!--遍历数组-->    <h3>人员列表(遍历数组)</h3>    <input type="text" placeholder="请输入名字" v-model="keyword"/>    <ul>        <li v-for="(p,index) in filterPersons" :key="p.id">            {{p.name}}--{{p.age}}---{{p.sex}}        </li>    </ul></div><script type="text/javascript">    Vue.config.productionTip = false    //创建vue实例    new Vue({        el: "#root",        data: {            keyword: '',            persons: [                {id: 1, name: "马冬梅", age: 18, sex: "女"},                {id: 2, name: "周冬雨", age: 19, sex: "女"},                {id: 3, name: "周杰伦", age: 20, sex: "男"},                {id: 4, name: "温兆伦", age: 21, sex: "男"},            ]        },        computed: {            filterPersons() {                return this.persons.filter((p) => {                    return p.name.indexOf(this.keyword) !== -1                })            }        }    })</script></body></html>

二、列表排序

Vue如何实现列表过滤与排序

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Vue初识</title>    <script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root">    <!--遍历数组-->    <h3>人员列表(遍历数组)</h3>    <input type="text" placeholder="请输入名字" v-model="keyword"/>    <button @click="sortType=2">年龄升序</button>    <button @click="sortType=1">年龄降序</button>    <button @click="sortType=0">原顺序</button>    <ul>        <li v-for="(p,index) in filterPersons" :key="p.id">            {{p.name}}--{{p.age}}---{{p.sex}}        </li>    </ul></div><script type="text/javascript">    Vue.config.productionTip = false    //创建vue实例    new Vue({        el: "#root",        data: {            keyword: '',            sortType: 0,            persons: [                {id: 1, name: "马冬梅", age: 30, sex: "女"},                {id: 2, name: "周冬雨", age: 31, sex: "女"},                {id: 3, name: "周杰伦", age: 18, sex: "男"},                {id: 4, name: "温兆伦", age: 19, sex: "男"},            ]        },        computed: {            filterPersons() {                const arr = this.persons.filter((p) => {                    return p.name.indexOf(this.keyword) !== -1                })                if (this.sortType) {                    arr.sort((p1, p2) => {                        return this.sortType == 1 ? p2.age - p1.age : p1.age - p2.age                    })                }                return arr            }        }    })</script></body></html>

三、数据更新的一个问题

首先演示更新时的一个问题,页面增加一个按钮,点击更新马冬梅的信息。先演示奏效的方法:

<button @click="updateMei">更新马冬梅信息</button>methods:{            updateMei(){                this.persons[0].name = "马老师"                this.persons[0].age = 50                this.persons[0].sex = "男"            }        }

Vue如何实现列表过滤与排序

再演示不奏效的方法,修改方法:

methods:{            updateMei(){                //不奏效                this.persons[0]={id: 1, name: "马老师", age: 50, sex: "男"}            }        }

运行程序,点击页面按钮,数据是不发生变化的。

对数组修改时,只有调用数组的相关操作方法才能奏效,包括:

这样写就可以更新了

this.persons.splice(0,1,{id: 1, name: "马老师", age: 50, sex: "男"})

四、Vue.set 方法

Vue如何实现列表过滤与排序

<div id="root">    <h3>个人信息</h3>    <h3>姓名:{{name}}</h3>    <h3>实际年龄:{{age.rAge}}</h3>    <h3>对外年龄:{{age.sAge}}</h3>    <h3>学校信息</h3>    <h3>学校名称:{{school.name}}</h3>    <h3 v-show="school.address">学校地址:{{school.address}}</h3>    <button @click="addAddress">添加学校地址属性</button></div>
<script type="text/javascript">    Vue.config.productionTip = false    //创建vue实例    new Vue({        el: "#root",        data: {            name:"张三",            age:{                rAge:30,                sAge:25            },            school:{                name:"某不知名大学"            }        },        methods:{            addAddress(){        //以下两种写法都可以                //Vue.set(this.school,"address","北京")                this.$set(this.school,"address","北京")            }        }    })</script>

但是 Vue.set 是有局限的,我们之前给 data 下的 school 增加了地址属性,但是我们不能给 data 直接增加属性

如果页面上有数组

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Vue初识</title>    <script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root">  ...    <ul>        <li v-for="(h,index) in hobby" :key="index">{{h}}</li>    </ul>    <button @click="changeHobby">修改爱好</button></div><script type="text/javascript">    Vue.config.productionTip = false    //创建vue实例    new Vue({        el: "#root",        data: {            ...            hobby:[                "抽烟",                "喝酒",                "烫头"            ]        },        methods:{            changeHobby(){            //这样改是可以的                Vue.set(this.hobby,0,"学习")                //直接修改是有问题的                //this.hobby[0] = "学习"            }        }    })</script></body></html>

五、Vue监视数据的原理

1、vue 会监视 data 中所有层次的数据

2、如何监测对象中的数据?

通过 setter 实现监视,且要在 new Vue时就传入要监测的数据

Vue.set(target. propertyName/index,value)vm.$set(target.propertyName/index,value)

3、如何监测数组中的数据?

通过包裹数组更新元素的方法实现,本质就是做了两件事:

4、在 Vue 修改数组中的某个元素一定要用如下方法:

特别注意: Vue.set() 和vm. $set()不能给 vm 或 vm 的根数据对象添加属性!

六、综合练习

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Vue初识</title>    <script type="text/javascript" src="./js/vue.js"></script></head><body><div id="root">    <h3>个人信息</h3>    <button @click="student.age++">年龄+1</button>    <button @click="addSex">添加性别属性,默认值:男</button>    <button @click="student.sex = '未知'">修改性别</button>    <h5>姓名:{{student.name}}</h5>    <h5>年龄:{{student.age}}</h5>    <h5 v-if="student.sex">性别:{{student.sex}}</h5>    <br/><br/>    <button @click="addHobby">添加一个爱好</button>    <button @click="changeHobby">修改第一个爱好为:开车</button>    <button @click="filterHobby">过滤掉爱好中的抽烟</button>    <h3>爱好</h3>    <ul>        <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>    </ul>    <br/><br/>    <button @click="addFriend">在列表首位添加一个朋友</button>    <button @click="updateFirstFriendName">修改第一个朋友名字为:李四</button>    <h3>朋友们</h3>    <ul>        <li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li>    </ul></div><script type="text/javascript">    Vue.config.productionTip = false    //创建vue实例    new Vue({        el: "#root",        data: {            student:{                name: "张三",                age: 18,                hobby: [                    "抽烟",                    "喝酒",                    "烫头"                ],                friends: [                    {                        name: "jerry",                        age: 20                    },                    {                        name: "tony",                        age: 19                    }                ]            }        },        methods: {            addSex(){                //以下两种写法都可以                //Vue.set(this.student,"sex","男")                this.$set(this.student,"sex","男")            },            addFriend(){                this.student.friends.unshift({name: "铁柱", age: 25})            },            updateFirstFriendName(){                this.student.friends[0].name = "李四"            },            addHobby(){                this.student.hobby.push("学习")            },            changeHobby(){                //以下三种写法都可以                //Vue.set(this.student.hobby,0,"开车")                this.$set(this.student.hobby,0,"开车")                //从0开始删除1个,插入开车                //this.student.hobby.splice(0,1,"开车")            },            filterHobby(){                this.student.hobby = this.student.hobby.filter((h)=>{                    return h !== "抽烟"                })            }        }    })</script></body></html>

Vue如何实现列表过滤与排序

Vue如何实现列表过滤与排序

Vue如何实现列表过滤与排序

感谢各位的阅读,以上就是“Vue如何实现列表过滤与排序”的内容了,经过本文的学习后,相信大家对Vue如何实现列表过滤与排序这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯