计算属性
计算属性用于解决表达式过长或逻辑复杂时的问题。
关键字：computed
示例：
<!--处理元数据，便于二次利用--><div id="myApp">今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}日元，含税价格为：{{priceInTax}}日元，折合人名币为：{{pricceChinaRMB}}元。</div><script>var myApp = new Vue({el: '#myApp',data: {price: 29980},computed: {priceInTax: function () {return this.price * 1.08;},pricceChinaRMB: function () {return Math.round(this.priceInTax / 16.75);}}});</script>
所有的计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算后的结果。
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
注意：计算属性还可以依赖多个Vue实例的数据，只要其中任一数据发生变化，计算属性就会重新执行，视图也会更新。
示例：在购物车内两个包裹的物品总价。
<div id="app">总价：{{ prices }}</div><script>var app = new Vue({el: '#app',data: {package1: [{name: 'iPhone 11',price: 9000,count: 2},{name: 'iPad',price: 2888,count: 1}],package2: [{name: 'apple',price: 3,count: 5},{name: 'banana',price: 2,count: 10}]},computed: {prices: function () {var temp = 0;for (var i = 0; i < this.package1.length; i++) {temp += this.package1[i].price * this.package1[i].count;}for (var j = 0; j < this.package2.length; j++) {temp += this.package2[j].price * this.package2[j].count;}return temp;}}});</script>
当package1或package2中的商品有任何变化，比如购买数量变化或增删商品时，计算属性prices就会自动更新，视图中的总价也会随之变化。
每一个计算属性都包含一个getter和setter。上面的示例只是利用getter来读取。在我们需要时提供一个setter函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义操作。
示例：
<div id="app">姓名：{{ fullName }}</div><script>var app = new Vue({el: '#app',data: {firstName: 'Jack',lastName: 'Green'},computed: {fullName: {//getter:用于读取get: function () {return this.firstName + ' ' + this.lastName;},//setter:写入时触发set: function (newValue) {var names = newValue.split(' ');this.firstName = names[0];this.lastName = names[names.length - 1];}}}});</script>
当执行app.fullName = ‘John Doe’；时，setter就会被调用，数据firstName和lastName都会相对更新，视图同样也会更新。
绝大多数情况下，只会使用默认的getter方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter和setter都声明。
计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称class和内联样式style。当使用组件时，计算属性也经常用来动态传递props。
计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性；二是计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据，例如：
<div id="app1"></div><div id="app2">{{reversedText}}</div><script>var app1 = new Vue({el: '#app1',data: {text: '123,456'}});var app2 = new Vue({el: '#app2',computed: {reversedText: function () {//这里依赖的是实例app1的数据textreturn app1.text.split(',').reverse().join(',');}}});</script>
这里我们创建了两个Vue实例app1和app2，在app2的计算属性reversedText中，依赖的是app1的数据text，所以当text变化时，实例app2的计算属性也会变化。
如果觉得《Vue.js--计算属性》对你有帮助，请点赞、收藏，并留下你的观点哦！
