列表的渲染、过滤（筛选）、排序操作

一枕槐安1

已于 2023-05-01 14:37:03 修改

阅读量677

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-07-13 22:55:18 首次发布

本文链接：https://blog.csdn.net/weixin_64770583/article/details/125772733

版权

前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

1.列表的渲染（遍历然后加载到页面上）

列表的渲染用到了v-for="xxx" xxx是js表达式事件，可以渲染数组，对象和字符串

<body>
    <div class="box">
        <ul>
            <!-- p是persons数组中的每一个元素 类似于forin遍历   :key="p.id" 类似于主键 -->
            <!--   :key保持唯一性 -->
            <li v-for="p in persons" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
            <!-- 遍历对象  (属性值,属性名) in 对象-->
            <li v-for="(value,key) in car">
                {{key}}--{{value}}
            </li>
            <!-- 遍历字符串 (字符,索引) in 字符串   key不推荐使用index索引-->
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
    </div>

<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '.box',
        data: {
            persons: [
                { id: '001', name: '张三', age: 18 },
                { id: '002', name: '李四', age: 22 },
                { id: '003', name: '王五', age: 20 }
            ],
            str: 'hello',
            car: {
                name: '宝马A8',
                price: '70W',
                carkey: '鲁p15225'
            },
        }
    })
</script>

（1）数组渲染 v-for="p in persons" p是persons数组中的每个元素

（2）对象渲染 v-for = "(value,key) in car" ,car是一个对象 key是对象的属性，value是属性的值

（3）对象渲染 v-for = "(char,index) in str" ,str是一个字符串 char是字符串的每个字符，index是每个字符的索引

2.列表的过滤（筛选）

<body>
    <div class="box">
        <h2>人员列表</h2>
        <!-- v-model:value  双向绑定 简写为v-model (((!!!而不是 :value))) -->
        <!-- v-bind  单向绑定 -->
        <input type="text" placeholder="请输入查找到姓名" v-model="keyWord">
        <ul>
            <!-- 遍历persons数组 -->
            <li v-for="p in newPersons">
                {{p.name}}---{{p.age}}
            </li>
        </ul>
    </div>
</body>

从全部列表数据中筛选出符合条件的，要筛选的列表比如是persons，然后筛选出姓名中包含搜索字符的数据例如输入框输入'三'，则保留姓名中有‘三’的数据

分析第一步需要遍历列表，遍历数组然后返回符合条件的元素

filter( )非常合适，返回一个包含所有在回调函数上返回为true的元素新数组，回调函数在此担任的是过滤器的角色，当元素符和条件，过滤器就返回true,而filter则会返回所有符合过滤条件的元素

分析第二步条件是包含字符使用indexOf（）如果有则返回那个字符的索引，如果没有则返回-1，我们需要的并不是索引，所以还要加一个判断如果不等于-1，则说明包含返回元素

persons.filter（（p）=>{ p.name.indexOf('传进来的参数')}）；

使用计算属性和侦听属性都可以实现

1.使用计算属性，输入框双向绑定一个data中的属性，让这个属性参与计算，然后返回一个数组，让模板代码遍历这个筛选过的数组从而实现

<script> 
   const vm = new Vue({
        el: '.box',
        data: {
            keyWord: '',
            persons: [
                { id: '001', name: '马冬梅', age: 18 },
                { id: '002', name: '周冬雨', age: 22 },
                { id: '003', name: '周杰伦', age: 20 },
                { id: '004', name: '理伦', age: 30 }
            ],
        },
        computed: {

            newPersons: {
                get() {
                    // filter() 返回一个符合条件的新数组 return给newPersons
                    return this.persons.filter((item) => {
                        // indexOf 判断是否包含this.keyWord,包含则返回索引,不包含返回-1;
                        // 但是我们需要的并不是索引,需要的是包含的元素  !==-1就是包含
                        if (item.name.indexOf(this.keyWord) !== -1) {
                            return item;
                        }
                    })
                },
                // 我们并没有用到setter,所以不考虑直接可以简写
                set() { }
            },
            // 简写
            // newPersons() {
            //     return this.persons.filter((p) => {
            //         return p.name.indexOf(this.keyWord) !== -1
            //            
            //         
            // });
            // }
        },

    });
</script>

2.使用侦听属性 ：输入框双向绑定一个data中的属性，然后监听这个属性，发生变化时调用函数

判断的方法和上面的计算属性一样

<script>
const vm = new Vue({
        el: '.box',
        data: {
            keyWord: '',
            persons: [
                { id: '001', name: '马冬梅', age: 18 },
                { id: '002', name: '周冬雨', age: 22 },
                { id: '003', name: '周杰伦', age: 20 },
                { id: '004', name: '理伦', age: 30 }
            ],
            newPersons: [],
        },
        watch: {
            // 监听的属性keyWord
            keyWord: {
                immediate: true,//立即执行一遍
                handler(newValue, oldValue) {
                    this.newPersons = this.persons.filter((item) => {
                        return item.name.indexOf(this.keyWord) !== -1;
                    })
                }
            }
        }
    });
</script>

3.列表的排序

排序正常能排序筛选完后也能排序，所以要写在筛选函数里面

        <button @click="sortAge = 1">年龄降序</button>
        <button @click="sortAge = 2">年龄升序</button>
        <button @click="sortAge = 0">原顺序</button>

添加几个按钮，以年龄为例排序最好使用计算函数，只要计算函数中用到的参数发生变化时就会调用重新执行计算函数，使用监听函数还得监听多个属性比较麻烦

原理：设定一个data属性sortAge 年龄排序

在筛选的基础上再加判断 filter（）产生的新数组先不返回给newpersons 用一个arr接收

然后再根据年龄升降判断arr怎么输出，排序方法arr.sort((a,b)=>{return a-b/b-a}) a-b为升序b-a为降序 return返回给arr

<body>
    <div class="box">
        <h2>人员列表</h2>
        <!-- v-model:value  双向绑定 简写为v-model (((!!!而不是 :value))) -->
        <!-- v-bind  单向绑定 -->
        <input type="text" placeholder="请输入查找到姓名" v-model="keyWord">
        <ul>
            <!-- 遍历persons数组 -->
            <li v-for="p in newPersons">
                {{p.name}}---{{p.age}}
            </li>
        </ul>
        <button @click="sortAge = 1">年龄降序</button>
        <button @click="sortAge = 2">年龄升序</button>
        <button @click="sortAge = 0">原顺序</button>
    </div>
</body>


<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '.box',
        data: {
            keyWord: '',
            persons: [
                { id: '001', name: '马冬梅', age: 18 },
                { id: '002', name: '周冬雨', age: 32 },
                { id: '003', name: '周杰伦', age: 20 },
                { id: '004', name: '理伦', age: 30 }
            ],
            sortAge: 0,//0代表原顺序 1降序2升序
        },
        computed: {
            // 计算属性必须要有返回值return  并且参与计算属性中用到的参数发生改变时,需重新执行回调函数
            newPersons() {
                // arr.filter(function(value,index){}); 筛选arr中符合条件的然后需要return返回一个新数组
                // p代表传进来的参数
                let arr = this.persons.filter((p) => {
                    // p.name.indexOf(this.seach)  判断p.name中有没有包含seach中的字符  没有则返回-1   有则返回序列号
                    return p.name.indexOf(this.keyWord) !== -1;
                });
                if (this.sortAge) {
                    arr.sort((a, b) => {
                        // a-b为升序 b-a为降序   属性值比较而不是元素
                        return this.sortAge == 1 ? b.age - a.age : a.age - b.age;
                    });
                }
                return arr;
            }
        }
    })
</script>

如果sortAge是0的话不进行if判断直接返回arr数组

排序就执行完毕了！

如果使用侦听属性明天再写吧，累了。。。