首先说使用场景
当在开发时遇到在模板中同时用到data中的多个数据进行逻辑处理时，你的做法有三种
第一种，直接干
直接在模板中进行逻辑处理如下，上代码
上面这种方法可以实现想要的效果，但是有两个缺陷
第一个相同逻辑代码重复写太多，按照正常的逻辑，有功能相同的逻辑要单独写一个函数
第二个缺陷 模板中是用来展示用的，在这里显示逻辑，简单的逻辑还可以，如果是复杂的逻辑，也不便于阅读，如不方便写注释和换行这些。都写一行，看着有点不爽
第二种方法
把相同的逻辑写成一个函数，在模板中用函数上代码
这种方法方便了后期的维护，以后如果需要修改，只需要修改函数就可以了
模板中用一个函数，看着有点怪，但是也没啥大毛病，但是有缺点，方法每次调用都要执行一下，没有缓存
如果没有vue的计算属性，也算是个办法，但是有了vue中计算属性，就有更好的办法了
第三种办法
首先上代码
首先注意一下，计算属性和方法调用的区别，计算属性是直接用的，方法需要调用，方法名加上小括号进行调用。
然后要注意的是计算属性有缓存，刷新页面的时候，我是方法打印了两次，我是计算属性打印了一次。说明计算属性是有缓存的。
所以这就是计算属性比方法好的地方，有了缓存就可以提高性能。
计算属性的使用方式有两种，上面那一种是直接写一个函数，还可以写成一个对象
上代码
注意的是：修改computed属性时，修改的还是data中的值，因为get获取的值是data中的，只有这样才可以真正的修改计算属性的值。
