下面是计算属性相关代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue3</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!--<link rel="stylesheet" type="text/css" href="main.css"/>--> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 <!--计算属性computed,可以用在一些复杂逻辑上--> 12 <div id="app"> 13 <!--1.模板中逻辑过重，不易维护--> 14 <p>{{msg.split('').reverse().join('')}}</p><br> 15 <!--2.用上computed属性，适用于复杂逻辑--> 16 <p>原值:{{msg}}</p> 17 <p>使用computed:字符串反转后的值:{{reverseMsg}}</p><br> 18 <!--3.用methods--> 19 <p>原值:{{msg}}</p> 20 <p>使用methods:字符串反转后的值:{{reverseMsg1()}}</p><br> 21 <!--我们可以发现computed属性和methods得到的结果是一样的。但是computed是基于它的缓存依赖（例子中指vm.msg)， 22 只有相关依赖改变才会重新取值；但是methods，每次重新渲染时，都会重新取值--> 23 <!--所以说一般computed性能更好--> 24 25 26 <!--计算属性默认只有getter,不过我们可以设置setter--> 27 <p>{{fullName}}</p> 28 <p>{{firstName}}</p> 29 <p>{{lastName}}</p> 30 </div> 31 32 <script> 33 var vm=new Vue({ 34 el: '#app', 35 //选项对象 36 data:{ 37 msg:'hello', 38 firstName:'Smith', 39 lastName: 'Lee' 40 }, 41 //声明计算属性,提供的函数将用作vm.reverseMsg的getter 42 //vm.reverseMsg依赖于vm.msg；vm.msg改变时，vm.reverseMsg也会改变 43 computed:{ 44 //计算属性的getter 45 reverseMsg:function(){ 46 return this.msg.split('').reverse().join(''); 47 }, 48 fullName:{ 49 get:function(){ 50 return this.firstName+' '+this.lastName; 51 }, 52 set:function(newValue){ 53 var value=newValue.split(' '); 54 this.firstName=value[0]; 55 this.lastName=value[1]; 56 } 57 } 58 59 }, 60 methods:{ 61 reverseMsg1:function(){ 62 return this.msg.split('').reverse().join(''); 63 } 64 } 65 }); 66 vm.fullName='John Lee'; 67 </script> 68 </body> 69 </html>