VUE研究ノート-リスト検索、ソート

1.リスト検索

1.リストフィルタリング

要件：文字を入力するときは、その文字を含む情報を表示してください。

リストフィルタリングは、計算を通じてフィルタリング結果を表示することです。

页面内容：
<input type="text"v-model="searchName">
    <ul>
        <li v-for="(p, index) in filterPerson" :key="index">
            {
    
    {
    
    index}}--{
    
    {
    
    p.name}}--{
    
    {
    
    p.age}}
        </li>
    </ul>

 const vm=new Vue({
    
    
          el:"#app",
          data:{
    
    
            orderType:0,//0表示正常顺序，1表示升序，2表示降序
            searchName:'',//查找的值
            person:[
                  {
    
    name:'Jack',age:18},
                  {
    
    name:'Bob',age:19},
                  {
    
    name:'lisa',age:20},
                  {
    
    name:'rose',age:21}
              ]
          },
          computed:{
    
    
              //计算最终搜索的值
            filterPerson(){
    
    
              //取出相关的数据
               const {
    
    searchName,person,orderType} =this;//解构重组
              //定义最终需要显示的数组
              let ePerson;
              //对person进行过滤
              ePerson=person.filter(p=>p.name.indexOf(searchName)!==-1);
              
              return ePerson;
            }
          }
      })

ePerson=person.filter(p=>p.name.indexOf(searchName)!==-1);

indexOfの戻り値が-1に等しくない。これは、文字が見つかったことを意味します。

p=>p.name.indexOf(searchName)!==-1是一个箭头函数
//相当于：
function fun(p){
    
    
         return p.name.indexOf(searchName)!==-1;
              }
ePerson=person.filter(fun);

2.リストの並べ替え

 <div>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>

ソートはsort（x）メソッドを使用し、xは関数である必要があります。

//在搜索时就进行按年龄排序
            if(orderType!==0){
    
    
                ePerson.sort(function(p1,p2){
    
    //p1-p2表示升序，p2-p1表示降序
                    if(orderType===1){
    
    
                        return p1.age-p2.age;//升序
                    }else{
    
    
                        return p2.age-p1.age;//降序
                    }
                })
            }

 methods: {
    
    
            setOrderType(orderType){
    
    
               this.orderType=orderType;//把按钮的orderType赋值给this的orderTy
            }
          },