VUE基础知识08

列表渲染：
3.过滤遍历
4.排序遍历：两种方式，服务器和客户端。
新建组件：ListRenderTwo.vue

<div>
   <input type = "text" placeholder = "请输入姓名！" v-model = "searchName">
   <ul>
      <li v-for="(p,index) in filterPersons" :key="personsKeys[index]">
      {{index + 1}} ）姓名：{{p.name}} 性别{{p.sex}}年龄{{p.age}}电话{{p.phone}}
      </li>
   </ul>
   <p></p>
   <div>
       <button @click="orderByAge(2)">年龄升序</button>
       <button @click="orderByAge(1)">年龄降序</button>
       <button @click="orderByAge(0)">默认</button>
   </div>
</div>

import shortId from 'shortid'
data(){
   return {
       searchName:'',
       persons:[
           {name:'张三',sex:'男',age:'19',phone:'18564885555'},
           {name:'李四',sex:'女',age:'20',phone:'57879955522'},
           {name:'王五',sex:'男',age:'23',phone:'85953356621'}
       ],
       personsKeys:[],
       orderType:0 //排序
    }
},
mounted(){
    this.personsKeys = this.persons.map(v=>shortId.generate())
},//取出shortId
methods:{
    orderByAge(orderType){
        this.orderType=orderType;
    }
}
computed:{
    filterPersons(){
        //获取数据
        let {searchName,persons,orderType} = this;
        //取出数组中的数据
        let arr = [...persons];
        //过滤数组
        if(searchName.trim()){
            arr =  persons.filter((p)=>p.name.indexOf(searchName) !== -1 );
        }
        //排序
        if(orderType){
            arr.sort((p1,p2)=> //es6的语法，我没学过，所以听课一脸懵，甚至还有点儿担心，前端要死了！
                if (orderType === 1){
                   return p2.age - p1.age
                   }else{
                   return p1.age-p2.age
                   }
        });
        return arr;
    }
}

//界面App.vue上的内容，从上到下依次顺序如下。
<ListRenderTwo/>
import ListRenderTwo from './components/ListRenderTwo'
components:ListRenderTwo