Vue?列表過濾與排序的實現(xiàn)

更新時間：2022年05月27日 11:52:36 作者：??奔跑吧雞翅????

這篇文章主要介紹了Vue?列表過濾與排序的實現(xiàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值需要的小伙伴可以參考一下

一、數(shù)據(jù)過濾

watch實現(xiàn)

<!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">
    <!--遍歷數(shù)組-->
    <h2>人員列表(遍歷數(shù)組)</h2>
    <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
    //創(chuàng)建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 實現(xiàn)

<!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">
    <!--遍歷數(shù)組-->
    <h2>人員列表(遍歷數(shù)組)</h2>
    <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
    //創(chuàng)建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>

二、列表排序

<!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">
    <!--遍歷數(shù)組-->
    <h2>人員列表(遍歷數(shù)組)</h2>
    <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
    //創(chuàng)建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>

三、數(shù)據(jù)更新的一個問題

首先演示更新時的一個問題，頁面增加一個按鈕，點擊更新馬冬梅的信息。先演示奏效的方法：

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

再演示不奏效的方法，修改方法：

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

運(yùn)行程序，點擊頁面按鈕，數(shù)據(jù)是不發(fā)生變化的。

對數(shù)組修改時，只有調(diào)用數(shù)組的相關(guān)操作方法才能奏效，包括：

push作用：在末尾添加元素
pop作用：刪除最后一個元素
shift作用：刪除第一個元素
unshift作用：在首位添加元素
splice作用：向/從數(shù)組添加/刪除項目，并返回刪除的項目
sort作用：對數(shù)組的元素進(jìn)行排序,并返回數(shù)組
reverse作用：反轉(zhuǎn)數(shù)組中元素的順序

這樣寫就可以更新了

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

四、Vue.set 方法

<div id="root">
    <h2>個人信息</h2>
    <h2>姓名：{{name}}</h2>
    <h2>實際年齡：{{age.rAge}}</h2>
    <h2>對外年齡：{{age.sAge}}</h2>
    <h2>學(xué)校信息</h2>
    <h2>學(xué)校名稱：{{school.name}}</h2>
    <h2 v-show="school.address">學(xué)校地址：{{school.address}}</h2>
    <button @click="addAddress">添加學(xué)校地址屬性</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    //創(chuàng)建vue實例
    new Vue({
        el: "#root",
        data: {
            name:"張三",
            age:{
                rAge:30,
                sAge:25
            },
            school:{
                name:"某不知名大學(xué)"
            }
        },
        methods:{
            addAddress(){
        		//以下兩種寫法都可以
                //Vue.set(this.school,"address","北京")
                this.$set(this.school,"address","北京")
            }
        }
    })
</script>

但是 Vue.set 是有局限的，我們之前給 data 下的 school 增加了地址屬性，但是我們不能給 data 直接增加屬性

如果頁面上有數(shù)組

<!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
    //創(chuàng)建vue實例
    new Vue({
        el: "#root",
        data: {
            ...
            hobby:[
                "抽煙",
                "喝酒",
                "燙頭"
            ]
        },
        methods:{
            changeHobby(){
            	//這樣改是可以的
                Vue.set(this.hobby,0,"學(xué)習(xí)")
                //直接修改是有問題的
                //this.hobby[0] = "學(xué)習(xí)"
            }
        }
    })
</script>
</body>
</html>

五、Vue監(jiān)視數(shù)據(jù)的原理

1、vue 會監(jiān)視 data 中所有層次的數(shù)據(jù)

2、如何監(jiān)測對象中的數(shù)據(jù)?

通過 setter 實現(xiàn)監(jiān)視，且要在 new Vue時就傳入要監(jiān)測的數(shù)據(jù)

(1).對象中后追加的屬性，Vue默認(rèn)不做響應(yīng)式處理
(2).如需給后添加的屬性做響應(yīng)式，請使用如下API：

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

3、如何監(jiān)測數(shù)組中的數(shù)據(jù)?

通過包裹數(shù)組更新元素的方法實現(xiàn)，本質(zhì)就是做了兩件事:

(1).調(diào)用原生對應(yīng)的方法對數(shù)組進(jìn)行更新
(2).重新解析模板進(jìn)而更新頁面

4、在 Vue 修改數(shù)組中的某個元素一定要用如下方法:

(1).使用這些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2).Vue.set()或vm.$set()

特別注意: Vue.set() 和vm. $set()不能給 vm 或 vm 的根數(shù)據(jù)對象添加屬性!

六、綜合練習(xí)

<!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">
    <h2>個人信息</h2>
    <button @click="student.age++">年齡+1</button>
    <button @click="addSex">添加性別屬性，默認(rèn)值：男</button>
    <button @click="student.sex = '未知'">修改性別</button>
    <h4>姓名：{{student.name}}</h4>
    <h4>年齡：{{student.age}}</h4>
    <h4 v-if="student.sex">性別：{{student.sex}}</h4>
    <br/><br/>
    <button @click="addHobby">添加一個愛好</button>
    <button @click="changeHobby">修改第一個愛好為：開車</button>
    <button @click="filterHobby">過濾掉愛好中的抽煙</button>
    <h2>愛好</h2>
    <ul>
        <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
    </ul>
    <br/><br/>
    <button @click="addFriend">在列表首位添加一個朋友</button>
    <button @click="updateFirstFriendName">修改第一個朋友名字為：李四</button>
    <h2>朋友們</h2>
    <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
    //創(chuàng)建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("學(xué)習(xí)")
            },
            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>