溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue列表排序中this的案例？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="demo">
search: <input type="text" v-model="searchName">
<ul>
<li v-for="(p,index) in filterPersons" :key="index">
{{index}} --- {{p.name}} --- {{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年齡升序</button>
<button @click="setOrderType(2)">年齡降序</button>
<button @click="setOrderType(0)">原本順序</button>
</div>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
searchName: '',
/**
* 排序種類:
* 0 - 原本順序
* 1 - 年齡升序
* 2 - 年齡降序
*/
orderType: 0,
persons: [{
name: 'Tom',
age: 18
},
{
name: 'Jack',
age: 20
},
{
name: 'Bob',
age: 16
},
{
name: 'Kaka',
age: 25
},
{
name: '22',
age: 23
},
{
name: '33',
age: 18
},
{
name: 'Shadow',
age: 21
},
{
name: 'Good',
age: 18
},
{
name: 'Lily',
age: 20
},
{
name: 'Lena',
age: 19
}
]
},
computed: {
filterPersons() {
// 取出相關的數(shù)據(jù)
const {
searchName,
persons,
orderType
} = this;
let flag;
flag = persons.filter(p => p.name.indexOf(searchName) !== -1);
if (orderType !== 0) {
flag.sort(function (p1, p2) {
if (orderType === 2) {
return p2.age - p1.age;
} else {
return p1.age - p2.age;
}
});
}
return flag;
}
},
methods: {
setOrderType(orderType) {
this.orderType = orderType;
}
}
});
</script>
</body>
</html>在這堆代碼中的filterPerson函數(shù)的第一行進行了this的賦值，創(chuàng)建了一個對象賦給了一個常量
在一些教程中表示這是取出要用的數(shù)據(jù)
其實算是簡化操作，因為后面我將其注釋掉，然后在每個變量前面加上this依舊可以跑起來
computed: {
filterPersons() {
// 取出相關的數(shù)據(jù)
// const {
// searchName,
// persons,
// orderType
// } = this;
let flag;
flag = this.persons.filter(p => p.name.indexOf(this.searchName) !== -1);
if (this.orderType !== 0) {
flag.sort(function (p1, p2) {
if (this.orderType === 2) {
return p2.age - p1.age;
} else {
return p1.age - p2.age;
}
});
}
return flag;
}
}感謝各位的閱讀！看完上述內(nèi)容，你們對vue列表排序中this的案例大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關文章內(nèi)容，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
