Der Inhalt dieses Artikels ist eine detaillierte Einführung (Codebeispiel) zu diesem Problem bei der Implementierung der Vue-Listensortierung. Ich hoffe, dass er für Sie hilfreich ist. .
Ich habe kürzlich über das Vue-Framework gelesen und die Art und Weise, wie dies in einem der Beispiele geschrieben wurde, hat mich verwirrt
<!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>In der ersten Zeile der filterPerson-Funktion in diesem Stapel des Codes: Die Zuweisung von this erstellt ein Objekt und weist es einer Konstante
zu. In einigen Tutorials heißt es, dass dies die zu verwendenden Daten sind Kommentieren Sie es später aus und fügen Sie dann jedes Mal
vor jeder Variablen hinzu. 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;
}
}Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in dieses Problem in der Implementierung der Vue-Listensortierung (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
