当前位置：首页 > news >正文

Vue：列表排序和筛选（运用计算属性和监视属性（侦听属性））

news 来源：原创 2024/5/4 13:55:47

文章目录

- 一、计算属性（computed）vs监视属性（watch）
- 二、监视属性（watch）
- - 第一步：构建主体架构
  - - （1）引入vue.js,创建vue实例
    - （2）准备好html容器，将属性导入
  - 第二步：完成列表筛选部分
  - - （1）让输入框的value值和vue实例中的属性进行双向绑定
    - （2）watch监视obj中keyword的变化
  - 第三步：完成列表排序部分
- 三、计算属性（computed）
- 四、效果图

一、计算属性（computed）vs监视属性（watch）

首先，带大家了解一下computed和watch的区别吧
1.computed能完成的功能，watch都可以完成
2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作

二、监视属性（watch）

感觉提到这种根据用户操作修改列表，大多数人应该都是想到根据什么变化然后渲染页面吧！
那么接下来，我就首先给大家来展示监视属性的写法吧！

第一步：构建主体架构

（1）引入vue.js,创建vue实例

<script src="../js/vue.js"></script>

const vm = new Vue({
            el: "#root",
            data: {
                persons: [
                    { id: 001, name: "周冬雨", age: 18, sex: "女" },
                    { id: 002, name: "马冬梅", age: 19, sex: "女" },
                    { id: 003, name: "周杰伦", age: 20, sex: "男" },
                    { id: 004, name: "温兆伦", age: 21, sex: "男" },
                ],
            },
})

（2）准备好html容器，将属性导入

<!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" v-model="obj.keyword" placeholder="请输入姓名">
        <ul>
            <li v-for="(k,index) in persons" :key="k.id">
                {{k.name}}-{{k.age}}-{{k.sex}}
            </li>
        </ul>
    </div>

这里说一下这个:key,在Vue非常重要的，是唯一标识符，大家先注意下，详细的后续单独出一期讲解。

第二步：完成列表筛选部分

（1）让输入框的value值和vue实例中的属性进行双向绑定

首先，在vue实例对象的data中添加一个属性，

 data: {      
         obj: {
               keyword: '',
         },
},

然后，然输入框中的value值去绑定这个keyword属性，这样的话我们就是拿到用户输入的值,并根据用户提供的值及时渲染页面，

 <input type="text" v-model="obj.keyword" placeholder="请输入姓名">

用v-model进行双向绑定。

（2）watch监视obj中keyword的变化

因为keyword在obj中，我们可以监视obj的变化，不过要开启深度监视。
这里进行筛选的时候，需要创建一个新数组，避免原数据被污染。

 data: { 
          newarr: [],
 },

watch: {
                obj: {
                    immediate: true,  // 初始化时让handler调用一下 
                    deep: true, //开启深度监视
                    handler() {
                        this.newarr = this.persons.filter(item => item.name.indexOf(this.obj.keyword) != -1) 
                        // 根据输入的名字进行筛选，有返回索引号，没有为-1
                    }
                }
            }

将v-for中的对象改变成遍历新数组

 <li v-for="(k,index) in newarr" :key="k.id">
                {{k.name}}-{{k.age}}-{{k.sex}}
            </li>

第三步：完成列表排序部分

思路：通过按钮的点击事件来改变Vue实例里面的属性，再通过监视这个属性的变化来改变新数组。
创建一个新属性sortType来控制排序的方式。把这个属性放在obj中。

 data: {      
         obj: {
               keyword: '',
               sortType: 0,
         },
},

在html中添加三个按钮，并配置点击事件来改变sortType的值

 <button @click="obj.sortType = 1">升序</button>
        <button @click="obj.sortType = 2">降序</button>
        <button @click="obj.sortType = 0">原序</button>

开始书写逻辑
排序主要是用sort来进行排序，注意一下不要弄反就行。

watch: {
                obj: {
                    immediate: true,
                    deep: true,
                    handler() {
                        this.newarr = this.persons.filter(item => item.name.indexOf(this.obj.keyword) != -1)
                        if (this.obj.sortType) {
                            this.newarr.sort((a1, a2) => this.obj.sortType == 1 ? a1.age - a2.age : a2.age - a1.age)
                        } else {
                            this.newarr = this.persons
                        }
                    }
                }
            }

好了监视属性就讲到这里，接下来让我们来了解一下计算属性。

三、计算属性（computed）

计算属性属性本身不存在，是根据已有属性计算得来，这样的话可以避免我们创新声明一个新变量，
总思路相似，直接带大家来看看源码吧！

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>人员信息</h2>
        <input type="text" v-model="keyword" placeholder="请输入姓名">
        <input type="button" value="原序" @click="order=0">
        <input type="button" value="降序" @click="order=1">
        <input type="button" value="升序" @click="order=2">
        <ul>
            <li v-for="item in arrsort" :key="item.id">
                姓名:{{item.name}} - 年龄:{{item.age}}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                order: 0,
                keyword: '',
                persons: [
                    { id: 01, name: "张三", age: 19 },
                    { id: 02, name: "李四", age: 26 },
                    { id: 03, name: "王五", age: 15 },
                    { id: 04, name: "赵六", age: 20 },
                ]
            },
            computed: {
                arrsort() {
                    const arr = this.persons.filter(item => item.name.indexOf(this.keyword) != -1)
                    if (this.order) {
                        arr.sort((item1, item2) => this.order == 1 ? item2.age - item1.age : item1.age - item2.age)
                    }
                    return arr
                }
            },
        })
    </script>
</body>