vue小案例-列表的过滤

最新推荐文章于 2024-04-14 21:15:44 发布

wanghuohuo1998

最新推荐文章于 2024-04-14 21:15:44 发布

阅读量156

点赞数

分类专栏： vue小案例文章标签：列表 filter vue.js

本文链接：https://blog.csdn.net/wanghuohuo1998/article/details/118441688

版权

vue小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Vue.js应用中使用计算属性对人员列表进行动态排序和过滤，保持原始数据不变。通过示例代码展示了根据关键词过滤人员名单，并提供升序、降序和原顺序排列的按钮。博客重点讲解了JavaScript中数组sort()方法的使用，包括默认排序规则和自定义排序规则的实现。

摘要由CSDN通过智能技术生成

<!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 v-model="keyWord" type="text" placeholder="请输入姓名">
      <button @click="sortType = 1">年龄升序↓</button>
      <button @click="sortType = 2">年龄降序↓</button>
      <button @click="sortType = 0">原顺序</button>
      <ul>
        <li v-for="(p,index) in fmtPersons" :key="p.id">
          {{p.name}}--{{p.sex}}--{{p.age}}岁
        </li>
      </ul>
    </div>

    <script type="text/javascript" >
      new Vue({
        el:'#root',
        data:{
          keyWord:'',
          sortType:0, //0原顺序 1升序  2降序
          persons:[
            {id:'001',name:'马冬梅',age:35,sex:'女'},
            {id:'002',name:'周冬雨',age:20,sex:'女'},
            {id:'003',name:'周杰伦',age:41,sex:'男'},
            {id:'004',name:'温兆伦',age:25,sex:'男'},
          ]
        },

        //使用computed过滤，优势：不影响原数据
        computed:{
          fmtPersons(){
            const {persons,keyWord,sortType} = this
            //根据关键词过滤
            let arr =  persons.filter( p => p.name.indexOf(keyWord) !== -1)
            //若需要排序
            if(sortType){
              //排序
              arr.sort((a,b)=>{
                if(sortType === 1) return a.age - b.age
                else return b.age - a.age
              })
            }
            return arr
          }
        }

        //在watch修改原数据，会导致原数据的丢失
        /* watch:{
          keyWord(value){
            const arr = this.persons.filter( p => p.name.indexOf(value) !== -1)
            this.persons = arr
          }
        } */
      })
    </script>
  </body>
</html>

注意点：

1.js中sort()方法使用总结
srot()如果不带参数，是将按字母顺序对数组中的元素进行排序，也就是是按照字符编码的顺序进行排序。

var arr1 = [‘a’, ‘d’, ‘c’, ‘b’];
arr.sort(); //[‘a’, ‘b’, ‘c’, ‘d’]

var arr2 = [10, 5, 40, 25, 100, 1];
arr2.sort(); //[1, 10 ,100, 25, 40, 5]

为sort()中传入排序规则函数可实现自定义排序
排序函数规则：
传两个形参
当返回值为正数时，交换传入两形参在数组中位置，可以依次来进行排序
按照数值大小进行排序-升序
arr.sort(function(a,b){
return a - b;
})

按照数值大小进行排序-降序
arr.sort(function(a,b){
return b - a;
})

wanghuohuo1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue小案例-列表的过滤

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>列表排序</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 想要对数据加工后再
复制链接

扫一扫

专栏目录