vue列表排序

最新推荐文章于 2023-04-23 17:23:26 发布

我艾边城

最新推荐文章于 2023-04-23 17:23:26 发布

阅读量63

点赞数

分类专栏： vue笔记文章标签： vue.js

本文链接：https://blog.csdn.net/m0_47320417/article/details/121216862

版权

vue笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/vue.js"></script>
    <title>Document</title>

</head>
<body>
        <div id="root">
            <input type="text" placeholder="请输入搜索词" v-model='keyWord'>
            <button @click="sortType=2">年龄升序</button>
            <button @click="sortType=1">年龄降序</button>
            <button @click="sortType=0">原顺序</button>
                <ul>
                    <li v-for="(p,index) of c" :key="index">
                        {{p.name}}-{{p.age}}-{{p.sex}}
                    </li>

                </ul>
              
             </div>
            
     <script type="text/javascript">
     //用watch实现
     //#region
    
        //#endregion
       //用计算属性
       new Vue({
           el:'#root',
           data:{
               keyWord:'',
               sortType:0, 
               persons:[
              {id:'1',name:'迪丽热妈',age:90,sex:'女'},
              {id:'2',name:'仇必唱',age:38,sex:'女'},
              {id:'3',name:'11',age:18,sex:'女'},
               
              ]
           
           },
          computed:{
              c(){
               const arr1=this.persons.filter((p)=>{
                         return p.name.indexOf(this.keyWord) !==-1
                      
               })
               if (this.sortType) {
                   arr1.sort((p1,p2)=>{
                       return this.sortType === 1? p2.age-p1.age : p1.age-p2.age
                   })
                   
                
               }
               return arr1
            }
        }

        })
    
        </script>
</body>
</html>

我艾边城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue列表排序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type.
复制链接

扫一扫