计算属性与监听属性的筛选思路

最新推荐文章于 2024-05-31 10:46:10 发布

ZJNing

最新推荐文章于 2024-05-31 10:46:10 发布

阅读量193

点赞数

文章标签： java servlet 前端

本文链接：https://blog.csdn.net/ZJNing/article/details/126610970

版权

计算属性computed具有缓存性，可以直接当作普通属性调用，不用加括号。data中的数据发生改变后会立即重新计算，依赖于属性的变化而变化。

侦听属性watch不具有缓存性，依赖于数据的变化而触发。

对以下数组进行排序：

一、computed进行筛选：

第一步：将数据渲染到页面

为了之后的排序数组内容不被改变，所以我这边新创建了一个list数组将内容放进去进行渲染

<body>
    <div id="root">
        <input type="text" placeholder="输入姓名">
        <button>年龄升序</button>
        <button>年龄降序</button>
        <button>原顺序</button>
        <ul >
            <li v-for="(item,index) in users" :key="index">
                {{item.uname}}-{{item.age}}-{{item.sex}}
            </li>
        </ul>
    </div>
</body>


<script>
    Vue.config.productionTip = false
    let vm = new Vue({
        el:"#root",
        data() {
            return {
                list:[
                    {uname: "马冬梅", age: 20, sex: "女"},
                    {uname: "周冬雨", age: 18, sex: "女"},
                    {uname: "周杰伦", age: 43, sex: "男"},
                    {uname: "温兆伦", age: 27, sex: "男"}
                ]
            }
        },
        
    })
</script>

第二步：对姓名uname进行搜索

在input框中绑定一个关键字keyword，然后在data中获取到这个搜索关键字。computed中，在循环的数组users中，执行对list数组进行筛选后返回查找到的uname的下标不等于-1，并将获取到的值赋值给arr后返回arr的操作

<body>
    <input type="text" v-model="keyword" placeholder="输入姓名">
</body>

<script>
    Vue.config.productionTip = false
    let vm = new Vue({
        el:"#root",
        data() {
            return {
                // 获取到搜索关键字
                keyword: '',
                list:[
                    {uname: "马冬梅", age: 20, sex: "女"},
                    {uname: "周冬雨", age: 18, sex: "女"},
                    {uname: "周杰伦", age: 43, sex: "男"},
                    {uname: "温兆伦", age: 27, sex: "男"}
                ]
            }
        },
        // 计算属性
        computed: {
            // 直接当做普通属性调用不加括号
            // 任何data中数据变化立即重新计算
            // 计算属性会缓存
            users() {
                var arr = this.list.filter(item => {
                    return item.uname.indexOf(this.keyword) !== -1
                })
                return arr
            }
            
        },
    })
</script>

第三步：对age年龄进行排序

立个sortType方法，等于1的时候升序，等于2的时候降序，等于0的时候回到原顺序，在data中将sortType定义为0，在computed中进行判断，如果sortType等于1的话，a的年龄减去b的年龄就是升序，否则就是降序，最后返回arr

<body>
    <div id="root">
        <input type="text" v-model="keyword" placeholder="输入姓名">
        <button @click="sortType=1">年龄升序</button>
        <button @click="sortType=2">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <ul >
            <li v-for="(item,index) in users" :key="index">
                {{item.uname}}-{{item.age}}-{{item.sex}}
            </li>
        </ul>
    </div>
</body>

<script>
    Vue.config.productionTip = false
    let vm = new Vue({
        el:"#root",
        data() {
            return {
                // 获取到搜索关键字
                keyword: '',
                // 
                sortType: 0,
                list:[
                    {uname: "马冬梅", age: 20, sex: "女"},
                    {uname: "周冬雨", age: 18, sex: "女"},
                    {uname: "周杰伦", age: 43, sex: "男"},
                    {uname: "温兆伦", age: 27, sex: "男"}
                ]
            }
        },
        computed: {
            // 直接当做普通属性调用不加括号
            // 任何data中数据变化立即重新计算
            // 计算属性会缓存
            users() {
                var arr = this.list.filter(item => {
                    return item.uname.indexOf(this.keyword) !== -1
                })
                if(this.sortType){
                    arr.sort((a,b) => {
                        return this.sortType == 1 ? a.age-b.age : b.age-a.age
                    })
                }
                return arr
            }
            
        },
    })
</script>

二、watch筛选

第一步：渲染

与computed渲染不同的是，在watch中我将循环的数组list赋值为空用来接收最后返回的结果数据。

<body>
    <div id="root">
        <input type="text" placeholder="输入姓名" v-model="keyword">
        <button @click="sortType= 1">年龄升序</button>
        <button @click="sortType= 2">年龄降序</button>
        <button @click="sortType= 0">原顺序</button>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                {{item.uname}}-{{item.age}}-{{item.sex}}
            </li>
        </ul>
    </div>
</body>


<script>
    Vue.config.productionTip = false
    let vm = new Vue({
        el:"#root",
        data() {
            return {
                keyword: "",
                sortType: 0,
                //新创建数组
                list:[],
                users: [
                    {uname: "马冬梅", age: 20, sex: "女"},
                    {uname: "周冬雨", age: 18, sex: "女"},
                    {uname: "周杰伦", age: 43, sex: "男"},
                    {uname: "温兆伦", age: 27, sex: "男"}
                ]
            }
        },
 })
</script>

第二步：搜索

在搜索方法中进行传参，立即执行，并对数据进行筛选，将筛选并查找到的值赋值给list数组

watch: {
            // 要观察的对象(一般为非DOM事件):function(newVal, oldVal){}
            keyword: {
                // 立刻执行
                immediate: true,
                handler(val) {
                    this.list = this.users.filter(item => {
                        return item.uname.indexOf(val) !== -1
                    })
                }
            },
        }

第三步：排序

对排序方法进行赋值，并判断这个值，如果对数据进行排序后这个值等于1的时候a的年龄减去b的年龄是升序，那么b的年龄减去a的年龄就是降序，否则就将users里面的数据转化成字符串再转化成数组将其赋值给list空数组，得到最后的结果

sortType: {
       handler(val) {
           if (val) {
                this.list.sort((a,b) => {
                return val == 1 ? a.age-b.age : b.age-a.age
                })
            } else {
                this.list = JSON.parse(JSON.stringify(this.users))
              }
           }
       }

ZJNing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性与监听属性的筛选思路

计算属性具有缓存性，可以直接当作普通属性调用，不用加括号。data中的数据发生改变后会立即重新计算，依赖于属性的变化而变化。侦听属性watch不具有缓存性，依赖于数据的变化而触发。：将数据渲染到页面为了之后的排序数组内容不被改变，所以我这边新创建了一个list数组将内容放进去进行渲染：对姓名uname进行搜索在input框中绑定一个关键字keyword，然后在data中获取到这个搜索关键字。...
复制链接

扫一扫