计算属性：Vue.js 模板内的表达式非常便利，但是缺点就是只能用于简单的运算，如果模板中有太多的逻辑运算会让模板不堪重负且难以维护。恰恰计算属性可以处理复杂的逻辑运算，也就是说对于任何复杂逻辑你都应当使用计算属性。
1、计算属性基础列子
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <span>{{message}}</span><br> 11 <span>{{reverseMessage}}</span><br> 12 <span>{{num}}</span><br> 13 <span>{{sum}}</span> 14 </div> 15 </body> 16 <script> 17 var vm = new Vue({ 18 el: '#id', 19 data:{ 20 message:'计算属性', 21 num:100 22 }, 23 computed:{ 24 reverseMessage: function () { 25 return this.message.split('').reverse().join('') 26 }, 27 sum:function(){ 28 return this.num + 100 29 //return this.num = this,num+100 //绑定数据num同时也更新了 30 } 31 } 32 }) 33 </script> 34 </html>
输出结果：
2、计算属性和Methods的比较
Methods也是实现计算属性相同的功能
计算属性是基于它们的依赖进行缓存的，也就是说计算属性只有在它相关依赖发生改变时才会重新求值，只要绑定数据没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必执行函数。
Methods只要发生重新渲染，methods就总会执行回调函数。相比而言如果遇到需要很大的开销逻辑运算时，使用计算属性比methods更有优势。因为计算属性具有缓存的功能，可以大大提高效率。