vue列表排序實作中的this問題的詳細介紹（程式碼範例）
- 不言轉載
- 2019-03-15 17:05:142470瀏覽
這篇文章帶給大家的內容是關於vue清單排序實作中的this問題的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
最近在看vue框架的知識，然後其中有個例子中的this的寫法讓我很懷疑
<!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() {
// 取出相关的数据
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函數的第一行進行了this的賦值，創建了一個物件賦給了一個常數
在一些教程中表示這是取出要用的資料
其實算是簡化操作，因為後面我將其註解掉，然後在每個變數前面加上this依舊可以跑起來
computed: {
filterPersons() {
// 取出相关的数据
// 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;
}
}
所以，在這個地方是將要用的資料事先放在了this中, 主要是函數中本身沒有這幾個變量，所以直接在函數內部使用是會報錯的，因此需要去外面的vue實例中取得。如果不這麼做，要多寫很多個this。
#以上是vue列表排序實作中的this問題的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除