首先先引入vue,js,不然一切操作均无效
先用一个外部div包裹整体,然后写出基本样式,input框可以搜索显示名字,写三个按钮分别绑定点击事件,然后再用一个v-for遍历数组,显示在页面上
<div id="root">
<h2>人员列表</h2>
<input type="text" name="" id="" value="" placeholder="搜索" v-model="keyword" />
<button @click='softval=2'>升序</button>
<button @click='softval=1'>降序</button>
<button @click='softval=0'>原序</button>
<ul>
<li v-for="p in filpersons" :key="p.id">{{p.name}}--{{p.age}}--{{p.sex}}</li>
</ul>
</div>
在script标签里写出Vue实例
const db = new Vue({
el: "#root",
data: {
keyword: '',
softval: 0,
persons: [{
id: '001',
name: '周杰伦',
age: 28,
sex: '男'
},
{
id: '002',
name: '炎亚伦',
age: 18,
sex: '男'
},
{
id: '003',
name: '周星驰',
age: 48,
sex: '男'
},
{
id: '004',
name: '张星星',
age: 38,
sex: '女'
}
],
},
computed: {
filpersons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyword) !== -1
})
if (this.softval) {
arr.sort((a, b) => {
return this.softval === 1 ? b.age - a.age : a.age - b.age
})
}
return arr
}
}
})
这边就不显示效果图了,写出来一看便知