溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

Vue如何實現列表過濾與排序

發布時間：2022-05-27 11:36:25 來源：億速云閱讀：158 作者：iii 欄目：開發技術

這篇文章主要講解了“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: "男"}
            }
        }

運行程序，點擊頁面按鈕，數據是不發生變化的。

對數組修改時，只有調用數組的相關操作方法才能奏效，包括：

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

這樣寫就可以更新了

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時就傳入要監測的數據

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

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

3、如何監測數組中的數據?

通過包裹數組更新元素的方法實現，本質就是做了兩件事:

(1).調用原生對應的方法對數組進行更新
(2).重新解析模板進而更新頁面

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

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

特別注意: 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如何實現列表過濾與排序這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！

向AI問一下細節

推薦閱讀：

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

上一篇新聞：
Java中HashMap怎么解決哈希沖突
下一篇新聞：
springboot?vue項目管理前后端怎么實現編輯功能

猜你喜歡

AI
助
手

產品服務

地區劃分

專題活動

幫助支持

關于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關注億速云

億速云公眾號

手機網站二維碼

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女