溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue如何實現列表過濾與排序”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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"/>
<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><!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>
<!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 = "男"
}
}
再演示不奏效的方法，修改方法：
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: "男"})
<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>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如何實現列表過濾與排序這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
