过滤

过滤操作

可以使用watch也可以使用计算属性，使用计算属性更加简单方便一点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>

排序

排序操作

computed:{
	filPerons(){
		const arr = this.persons.filter((p)=>{
			return p.name.indexOf(this.keyWord) !== -1
		})
		//判断一下是否需要排序
		if(this.sortType){
			arr.sort((p1,p2)=>{
				return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
			})
		}
		return arr
	}
}

例子

<body>
<div id="test">
    <input type="text" v-model="searchName">
    <ul>
        <li v-for="(p, index) in filterPersons" :key="index">
            {{index}}---{{p.name}}---{{p.age}}
        </li>
    </ul>
    <button @click="setOrderType(1)">年龄升序</button>
    <button @click="setOrderType(2)">年龄降序</button>
    <button @click="setOrderType(0)">还原顺序</button>
</div>

    <script src="../js/vue.js"></script>

    <script>
        new Vue({
            el: '#test',
            data: {
                searchName: '',
                orderType: 0, //0代表原本， 1代表升序， 2代表降序
                persons: [
                    {name: 'Tom', age: 10},
                    {name: 'Jack', age: 16},
                    {name: 'Rose', age: 12},
                    {name: 'Aka', age: 18}
                ]
            },
            computed: {
                filterPersons(){
                    // 1. 取出相关数据
                    const {searchName, persons, orderType} = this; // 解构赋值
                    
                    let fPersons;
               
                    // 2. 对persons进行过滤
                    fPersons = persons.filter(p => p.name.indexOf(searchName) !== -1);

                    // 3. 排序
                    if(orderType !== 0){
                        fPersons.sort(function(p1, p2){ // 返回负数p1在前，返回正数p2在前
                            if(orderType === 2){ 
                                return p2.age - p1.age; // 降序
                            }else{ 
                                return p1.age - p2.age; // 升序
                            }
                        })
                    }
                    return fPersons;
                }
            },
            methods: {
                setOrderType(orderType){
                    this.orderType = orderType;
                }
            }
        })
    </script>
</body>

Vue列表过滤与排序

过滤

排序