Vue点击按钮进行排序

首先先引入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
					}
				}
})

这边就不显示效果图了，写出来一看便知