计算属性是computed：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <h1>{{fullName}}</h1> <p>{{GfullName()}}</p> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed:[false,false,false,false], firstName:'涂', lastName:'博闻' }, computed:{ fullName:function(){ return this.firstName+this.lastName; } }, methods: { GfullName:function(){ return this.firstName+this.lastName; } } }) </script> </body> </html>我们在需要将数据对象中数据运算之后显示的情况下，既可以使用methods来定义函数返回值，然后使用{{}}来解析运算函数，也可以定义computed计算属性，这样不用加括号，使程序更有可读性。
计算属性的setter和getter方法：
一般的计算属性都会有set和get方法，但是由于一般set方法不会被使用，所以像上面那样定义计算属性，在调用时就会直接调用属性的get方法。set方法一般是计算属性被修改之后会调用的方法，get方法是获取计算属性时调用的方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!-- <ul> <li v-for="it in S10" v-on:click="">{{it}}</li> </ul> --> <h1>{{fullName}}</h1> <p>{{GfullName()}}</p> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { S10: ['JDG', 'TES', 'SN', 'LGD'], beRed: [false, false, false, false], firstName: '涂', lastName: '博闻' }, computed: { fullName: { get: function () { return this.firstName + this.lastName; }, set: function (newValue) { const name=newValue.split(' '); this.firstName=name[0]; this.lastName=name[1]; alert("修改了名字"); } } }, methods: { GfullName: function () { return this.firstName + this.lastName; } } }) </script> </body>计算属性和 methods方法的区别：
计算属性会被浏览器缓存起来，如果值没有改变就不会被调用函数，但是如果是methods方法来调用，无论值有没有改变，只要调用一次，函数就会被调用一次，程序运行速度会很慢。
