007 V 什么是计算属性？

不二如是

                               
登录/注册后可看大图

上一讲我们学习了两个常用的指令和其对应的语法糖，本次学习计算属性。

通过之前的学习，我们已经搭建出了一个最简单的Vue的应用，在模版中双向绑定一些数据或表达式。

但是如果表达式过长或者逻辑很复杂，就会变得臃肿不堪。

随便举个例子：

<div id="myApp">
    {{myString.split(",).reverse().join(';')}}
</div>

切割一个字符串，然后执行相应的操作，看起来不是很清晰。

我们现在就可以使用计算属性，修改一下div：

<div id="myApp">
    {{reverText}}
</div>

修改Vue实例：

<script>
var app = new Vue({
    el:"#myApp",
    data:{
        text:"fishc,123"
    },
    computed:{
        reverText:function(){
//            this指向当前的实例
            return this.text.split(",").reverse().join(",");
        }
    }
})
</script>

所有能写在div中的属性都可以以函数方式写在Vue的实例内的computed选项中。

最终返回计算后的结果。

---

课后作业


1、将很长的属性写在div中是否合理（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

差点夹不住屁

已学习,谢谢老板

lbjstudypython

F

Ruide

F

优时风

1

一笙彤

0

suweixuan1998

F

HanYanShuang

.

kykio

围观