Vue.js计算属性

最新推荐文章于 2024-07-01 21:20:53 发布

Sweet_HaoChen

最新推荐文章于 2024-07-01 21:20:53 发布

阅读量166

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/qq_38311097/article/details/82699249

版权

Vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在Vue应用中，在模板中双向绑定一些数据或表达式。但是表达式如果过长，或者逻辑更为复杂，就会变得臃肿甚至难以阅读和维护，所以在遇到复杂逻辑的时候应该使用计算属性。所有的计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算后的结果。

在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回一个结果即可。

<body>
    <div id="app">
        {{ prices }}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            packet1:[
                {
                    name:'object1',
                    price:7199,
                    count:5
                },{
                    name:'object2',
                    price:4399,
                    count:1
                }
            ],
            packet2:[
                {
                    name:'object1',
                    price:7199,
                    count:3
                },{
                    name:'object2',
                    price:4399,
                    count:7
                }
            ]
        },
        computed:{
            prices:function () {
                var total = 0;
                for (var i = 0;i < this.packet1.length;i++){
                    total = total + this.packet1[i].price*this.packet1[i].count;
                }
                for (var i = 0;i < this.packet2.length;i++){
                    total = total + this.packet2[i].price*this.packet2[i].count;
                }
                return total;
            }
        }
    })
</script>

每一个计算属性都包括一个getter和setter，上面的实例都是计算属性的默认用法，只是利用了getter来读取。需要时也可以提供一个setter函数，可以手动修改计算属性的值，触发setter函数，执行一些自定义的操作。

methods和computed区别：

计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化的时候，他才会重新取值，而methods只要重新渲染，他就会被调用，因此函数也就会被执行。