VUE3.0,DAY20
列表排序
1.按照列表中某一元素进行排序,如按照年龄大小对列表内的元素进行排序。使用的是计算属性的方法,同时还用到了sort排序的知识。
<!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>列表排序</title>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<!--增加一个列表过滤查询框,即模糊查找的功能-->
<input type="text" placeholder="请输入要查询的名字" v-model="KeyWords">
<button @click="sortType=2">年龄升序</button>
<button @click="sortType=1">年龄降序</button>
<button @click="sortType=0">原顺序</button>
<!--遍历数组-->
<ul>
<li v-for="XianShi in filterpersons1">{{XianShi.name}}-{{XianShi.age}}-{{XianShi.sex}}</li>
<!--使用上边的代码后,在网页中就会自动生成四个li标签内的数据。因为data中persons1有四个数据-->
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例,习惯用一个变量来接该vue实例,此处用x
/*const x = new Vue({
el: '#root',
data() {
return {
//keywords与输入框进行了双向数据绑定,收集用户的输入内容。
KeyWords: '',
persons1: [
{
id: '001', name: '马冬梅', age: 18, sex: '男'
},
{
id: '002', name: '周冬雨', age: 19, sex: '女'
},
{
id: '003', name: '周杰伦', age: 20, sex: '男'
},
{
id: '004', name: '温兆伦', age: 21, sex: '女'
}
],
filterpersons1: []
}
},
//监视属性,监视keywords的变化
watch: {
KeyWords: {
immediate: true,
handler(val) {
//使用过滤函数filter,过滤persons1中的数据
//随后在令当前的filterpersons1中的数据等于过滤后的数据。
this.filterpersons1 = this.persons1.filter((XianShi) => {
//返回姓名中包含输入val值的数据,检测是否包含字符串用indexOf
return XianShi.name.indexOf(val) !== -1
//不等于-1就是包含,等于-1就是待检测的数据中不包含指定的字符串
})
}
}
}
})*/
//计算属性computer实现
new Vue({
el: '#root',
data() {
return {
//keywords与输入框进行了双向数据绑定,收集用户的输入内容。
KeyWords: '',
sortType: 0,//定义排序的类型,0代表原顺序,1是降序,2是升序
persons1: [
{
id: '001', name: '马冬梅', age: 18, sex: '男'
},
{
id: '002', name: '周冬雨', age: 19, sex: '女'
},
{
id: '003', name: '周杰伦', age: 20, sex: '男'
},
{
id: '004', name: '温兆伦', age: 21, sex: '女'
}
],
}
},
computed: {
filterpersons1() {
//第一个return是计算属性规定的要返回值
//第二个return是过滤属性规定的要返回值
//如何拿到用户输入的要检测的内容。使用this.keywords
const arr = this.persons1.filter((XianShi) => {
return XianShi.name.indexOf(this.KeyWords) !== -1
})
//判断是否需要排序
//如果不等于0则代表需要排序,在进行判定是升序还是降序
if (this.sortType !== 0) {
//就是把arr数组里的数进行升序,降序就是b-a,即后一个数减前一个数。
//这里的a和b代表列表内的元素
arr.sort((a, b) => { return this.sortType === 1 ? a.age - b.age : b.age - a.age })
}
return arr
}
}
})
</script>
</body>
</html>