vue实现简单人员列表
功能
- 可以显示一个人员列表
- 可以对列表过滤
- 可以对列表排序
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>列表</title>
</head>
<body>
<div id="app">
<!-- 1、使用v-for之后必须配置一个key,相当于每个li的标识，
最好为数据的唯一标识，如果不配置默认使用index作为key
2、:key是v-bind:key数据绑定的缩写
3、v-model是v-model:value的缩写，可以实现双向绑定，
即在页面上输入的值可以传回vm,注意它只能用来修饰value -->
<h1>人员列表</h1>
<input type="text" placeholder="请输入名字" v-model="keyword">
<button @click="sortType=1">升序</button>
<button @click="sortType=2">降序</button>
<button @click="sortType=0">原顺序</button>
<ul>
<li v-for="p in filters" :key='p.id'>
{{p.name}}---{{p.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',//与模板绑定
data() {
return {
PersonArr:[
{id:1,name:'张三',age:10},
{id:4,name:'王三',age:15},
{id:2,name:'张四',age:9},
{id:3,name:'王四',age:30},
],
keyword:"",
sortType:0//0-原顺序；1-升序；2-降序
}
},
computed:{
filters(){
// 1、不需要使用set可以使用计算属性的简写形式，即函数式，需要返回值
// 2、filter函数的作用是过滤，它不会改变原数组，返回一个新的数组
// 3、箭头函数快捷键an+tab，需要vm管理的写普通函数，不需要vm管理的写箭头函数
// 4、indexOf判断字符串是否包含字符串，不包含返回-1.包含返回其索引，注意默认包含“”返回0
// 5、sort函数需要两个参数排序，前-后升序，后-前降序，它会改变原数组
const arr = this.PersonArr.filter((p) => {
return p.name.indexOf(this.keyword) !== -1
})
if(this.sortType){
arr.sort((p1,p2) => {
return this.sortType == 1?p1.age-p2.age:p2.age-p1.age
})
}
return arr
}
},
})
</script>
</body>
</html>