列表过滤
回顾filter
let arr = [1,2,3,4,5,6,7,8,9]
// filter不会破坏原数组的结构，会生成一个全新的数组。
let newArr = arr.filter((num) => {
//return 过滤规则
return num < 5
})
console.log(newArr)
列表过滤watch属性实现
<body>
<div id="app">
<h1>{{msg}}</h1>
<input type="text" placeholder="请输入搜索关键字" v-model="keyword" />
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>薪资</th>
<th>选择</th>
</tr>
<tr v-for="(hero,index) in filteredHeros" :key="hero.id">
<td>{{index+1}}</td>
<td>{{hero.name}}</td>
<td>{{hero.power}}</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
keyword: "",
msg: "列表过滤",
heros: [
{ id: "101", name: "章三", power: 10000 },
{ id: "102", name: "三响", power: 9000 },
{ id: "103", name: "李四", power: 8000 },
{ id: "104", name: "李章", power: 6000 },
],
filteredHeros: [],
},
watch: {
//有bug，无法一开始就检测
/* keyword(val){
// 执行过滤规则
this.filteredHeros = this.heros.filter((hero) => {
return hero.name.indexOf(val) >= 0
})
} */
//使用完整形式
keyword: {
immediate: true,
handler(val) {
this.filteredHeros = this.heros.filter((hero) => {
return hero.name.indexOf(val) >= 0;
});
},
},
},
});
</script>
</body>
列表过滤computed属性实现
<body>
<div id="app">
<h1>{{msg}}</h1>
<input type="text" placeholder="请输入搜索关键字" v-model="keyword" />
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>薪资</th>
<th>选择</th>
</tr>
<tr v-for="(hero,index) in filteredHeros" :key="hero.id">
<td>{{index+1}}</td>
<td>{{hero.name}}</td>
<td>{{hero.power}}</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
keyword: "",
msg: "列表过滤",
heros: [
{ id: "101", name: "章三", power: 10000 },
{ id: "102", name: "三响", power: 9000 },
{ id: "103", name: "李四", power: 8000 },
{ id: "104", name: "李章", power: 11000 },
],
},
computed: {
filteredHeros() {
// 执行过滤
return this.heros.filter((hero) => {
return hero.name.indexOf(this.keyword) >= 0;
});
},
},
});
</script>
</body>
列表排序
回顾sort方法
// 回顾sort方法
let arr = [8, 9, 5, 4, 1, 2, 3];
// sort方法排序之后，不会生成一个新的数组，是在原数组的基础之上进行排序，会影响原数组的结构。
arr.sort((a, b) => {
// a在前，升序，b在前降序
return b - a;
});
console.log(arr);
列表排序
<body>
<div id="app">
<h1>{{msg}}</h1>
<input type="text" placeholder="请输入搜索关键字" v-model="keyword" />
<br />
<button @click="type = 1">升序</button>
<button @click="type = 2">降序</button>
<button @click="type = 0">原序</button>
<table>
<tr>
<th>序号</th>
<th>英雄</th>
<th>能量值</th>
<th>选择</th>
</tr>
<tr v-for="(hero,index) in filteredHeros" :key="hero.id">
<td>{{index+1}}</td>
<td>{{hero.name}}</td>
<td>{{hero.power}}</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
// 定义标识项，1是升序，2是降序，0是原序
type: 0,
keyword: "",
msg: "列表排序",
heros: [
{ id: "101", name: "章三", power: 10000 },
{ id: "102", name: "三响", power: 9000 },
{ id: "103", name: "李四", power: 8000 },
{ id: "104", name: "李章", power: 11000 },
],
},
computed: {
filteredHeros() {
// 执行过滤 拿到过滤后的数组
const arr = this.heros.filter((hero) => {
return hero.name.indexOf(this.keyword) >= 0;
});
// 排序，根据type值进行降排序
if (this.type === 1) {
arr.sort((a, b) => {
return a.power - b.power;
});
} else if (this.type == 2) {
arr.sort((a, b) => {
return b.power - a.power;
});
}
// 返回
return arr;
},
},
});
</script>
</body>
![[LeetCode-Python版]21. 合并两个有序链表（迭代+递归两种解法）](https://i-blog.csdnimg.cn/direct/6ec2d456d9b5446f96ac063901349d31.png)
