在写商场类项目时，我们经常使用到搜索功能和排序功能，以前我们可能是调后台接口让后台通过sql语句进行处理，现在学了vue，只需要使用vue中的computed或watch就能实现。
第一种实现方法：
运用vue里的computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="root">
<input type="text" name="" id="" placeholder="请输入姓名" v-model="keyword">
<button @click.prevent="sortType=1">年龄升序</button>
<button @click.prevent="sortType=2">年龄降序</button>
<ul>
<li v-for="(p,id) of fillpersons" :key="id">
{{p.name}}--{{p.age}}--{{p.gender}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.config.productionTip = false//以阻止 vue 在启动时生成生产提示
new Vue({
el: '.root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data: {//data中用于存储数据，数据供el所指定的容器去使用
sortType: 0,//用于存储是降序还是升序
keyword: '',//用于存储搜索内容
persons: [
{ id: 1, name: '马冬梅', age: 18, gender: '女' },
{ id: 2, name: '周冬雨', age: 19, gender: '女' },
{ id: 3, name: '周杰伦', age: 18, gender: '男' },
{ id: 4, name: '任嘉伦', age: 19, gender: '男' },
]
},
//初始和内容发生改变时会执行
computed: {
fillpersons() {
// 搜索功能实现
// 根据搜索的内容过滤persons数组，并将过滤过后的数组返回给arr
const arr = this.persons.filter((p) => {
return JSON.stringify(p).indexOf(this.keyword) !== -1
})
//排序功能实现
//判断排序字段sortType是否为0，初始时排序字段sortType为0，不执行排序功能，点击排序按钮后，sortType不为0，那么就对arr进行排序
if (this.sortType) {
arr.sort((a, b) => {
//排序字段sortType是否为1，如果为1就是升序排序，否则就是降序排序
return this.sortType === 1 ? a.age - b.age : b.age - a.age
})
}
return arr
}
}
})
</script>
</body>
</html>
第二种实现方法：
运用vue里的watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="root">
<input type="text" name="" id="" placeholder="请输入姓名" v-model="keyword">
<button @click.prevent="sortType=1">年龄升序</button>
<button @click.prevent="sortType=2">年龄降序</button>
<ul>
<li v-for="(p,id) of rePersons" :key="id">
{{p.name}}--{{p.age}}--{{p.gender}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.config.productionTip = false//以阻止 vue 在启动时生成生产提示
new Vue({
el: '.root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data: {//data中用于存储数据，数据供el所指定的容器去使用
sortType: 0,//用于存储是降序还是升序
keyword: '',//用于存储搜索内容
persons: [
{ id: 1, name: '马冬梅', age: 18, gender: '女' },
{ id: 2, name: '周冬雨', age: 19, gender: '女' },
{ id: 3, name: '周杰伦', age: 18, gender: '男' },
{ id: 4, name: '任嘉伦', age: 19, gender: '男' },
],
rePersons: []//用来存储搜索过后的人
},
watch: {
// 搜索功能实现
//监听搜索的内容keyword，一旦发生改变，根据搜索的内容keyword过滤persons数组，并将搜索过后的值返回给新的数组rePersons
keyword: {
//获取初始的搜索的内容keyword
immediate: true,
handler(val) {
this.rePersons = this.persons.filter((p) => {
return JSON.stringify(p).indexOf(this.keyword) !== -1
})
}
},
// 排序功能实现
//监听排序字段sortType，点击按钮后发生改变，那么就执行排序
sortType: {
//获取初始的排序字段sortType
immediate: true,
handler(val) {
this.rePersons.sort((a, b) => {
//排序字段sortType是否为1，如果为1就是升序排序，否则就是降序排序
return this.sortType === 1 ? a.age - b.age : b.age - a.age
})
}
}
}
})
</script>
</body>
</html>
