Vue学习系列 -- 计算属性

最新推荐文章于 2024-02-04 10:48:17 发布

躬匠

最新推荐文章于 2024-02-04 10:48:17 发布

阅读量327

点赞数 1

分类专栏： Vue.js Vue学习系列

本文链接：https://blog.csdn.net/ydm19891101/article/details/90577194

版权

Vue.js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Vue学习系列

15 篇文章 1 订阅

订阅专栏

不知道在上一节指令章节的学习中，大家有没有注意到一个细节：

Vue.js模板内的表达式只能进行简单的计算，当其过长或者逻辑复杂时会变得难以维护，遇到这个问题如何处理呢？答案是计算属性。

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

使用计算属性有以下两点好处：

计算属性相当于对数据操作的封装，用户只需要知道如何使用就可以了，无需关注逻辑细节；
解耦视图与业务的逻辑，也便于代码维护

通过前面几个章节的学习，我们已经知道了了el、data、methods三个属性，而计算属性的关键字是computed。

废话少说，下面我们一块来学习一下。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Learning Vue.js</title>
</head>

<body>
<div id="app1">
 <span style="color:red"> 总分数:{{scores}}</span></br>
 <span style="color:red"> 平均分数:{{averagescore}}</span></br>
</div>
</body>

<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
 new Vue({
   el : "#app1", //指定绑定的DOM元素
   data : {  //设置data属性值
        grade : [
            {  
                course : "english",
                score : 90
            },
            {  
                course : "chinese",
                score : 97
            },
            {  
                course : "math",
                score : 90
            },
        ]
   },
   computed : { //设置方法属性
       scores : function() {
           var scores = 0.0;
            for (var i=0; i < this.grade.length; i ++) {
                scores += this.grade[i].score;
            }
            return scores;
        },
        averagescore : function() {
             var average = 0.0;
             average = this.scores / this.grade.length;
             return average;
        }
   }

 })

</script>
</html>

上面的代码里使用了两个计算属性：总分数、平均值，代码很简单，就无需在解释了。

最后给出我自己的建议：对于复杂的逻辑处理，如函数调用、运算最好都放到计算属性里去。