Vue实现列表过滤与排序的两种方法

 用侦听属性实现列表过滤：

<div id="APP">
	<input type="text" v-model="keyWord">
	<ul>
		<li v-for="(item,index) of newList" :key="item.id">
			{
  {item.name}} - {
  {item.age}} - {
  {item.sex}}
		</li>
	</ul>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			// keyWord 用于接收用户输入的内容
			keyWord:"",
			// 原始数据列表，用于过滤，不可更改
			list:[
				{id:1, name:"马冬梅", age:30, sex:"女"},
				{id:2, name:"周冬雨", age:18, sex:"女"},
				{id:3, name:"周杰伦", age:26, sex:"男"},
				{id:4, name:"温兆伦", age:24, sex:"男"}
			],
			// 过滤后的数据列表，用于渲染页面
			newList:[]
		}
	},
	watch:{
		// 监听 keyWord 数据变化，当用户输入时进行操作
		keyWord:{
			// 初始化时执行一下，避免页面加载时 newList 中没有数据
			immedi