007 V 什么是计算属性？

不二如是

                               
登录/注册后可看大图

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

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

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

随便举个例子：

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

复制代码

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

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

1. <div id="myApp">
   
2.     {{reverText}}
   
3. </div>

复制代码

修改Vue实例：

1. <script>
   
2. var app = new Vue({
   
3.     el:"#myApp",
   
4.     data:{
   
5.         text:"fishc,123"
   
6.     },
   
7.     computed:{
   
8.         reverText:function(){
   
9. //            this指向当前的实例
   
10.             return this.text.split(",").reverse().join(",");
    
11.         }
    
12.     }
    
13. })
    
14. </script>

复制代码

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

最终返回计算后的结果。

---

课后作业


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



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

差点夹不住屁

已学习,谢谢老板

lbjstudypython

F

Ruide

F

优时风

1

一笙彤

0

suweixuan1998

F

HanYanShuang

.

kykio

围观