ホームページ > 記事 > ウェブフロントエンド > Vue リストの並べ替え実装におけるこの問題の詳細な紹介 (コード例)
Vue リストの並べ替え実装におけるこの問題の詳細な紹介 (コード例)
- 不言転載
- 2019-03-15 17:05:142483ブラウズ
この記事では、Vue のリストソート実装におけるこの問題について詳しく紹介 (コード例) しています。一定の参考値があります。困っている友人は参考にしてください。お役に立てれば幸いです。
私は最近 vue フレームワークについて読んでいましたが、サンプルの 1 つでこれがどのように書かれているかを見て非常に混乱しました。
<!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 を追加しても引き続き実行されるため、これは簡素化された操作です。関数自体にはこれらの変数が存在しないため、関数内で直接使用するとエラーが報告されるため、外部のvueインスタンスから取得する必要があります。そうしないと、これをさらにたくさん書かなければなりません。
以上がVue リストの並べ替え実装におけるこの問題の詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。