vue计算属性的使用
我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护，比如
{{text.split(',').reverse().join(',')}}
表达式里面包含了3个操作，有时候可能会更加复杂，这时我们可以使用计算属性。如下
{{reversedText}} data(){return{ text:'123,456'} }, computed: { reversedText:function() {//这里的this指向的是当前的vue实例returnthis.text.split(',').reverse().join(','); //如果这两的text是后台接受的数据，最好加个判断数据为不为空} } }
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，计算属性还可以依赖多个
数据，只要其中任何一个数据变动，计算都会重新执行。例如：
data(){return{ package1: [ { name:'iPhoneX', price:300, count:1}, { name:'iPad', price:100, count:2} ], package2: [ { name:'apple', price:2, count:5}, { name:'orange', price:1, count:10} ] } }, computed: { price:function() {varprice=0;for(vari=0; i<this.package1.length; i++){ price+=this.package1[i].price*this.package1[i].count}for(vari=0; i<this.package2.length; i++){ price+=this.package2[i].price*this.package2[i].count}returnprice; } } }
当package1或者package2中price和count有任何变动时，计算属性都会price都会自动更新，视图中的总价也会自动变动。
每个计算属性都包含一个getter和setter，上面的例子都是计算属性的默认用法，只是利用了getter来读取。计算属性提供的setter函数，当你手动修改计算属性的值时，就可以触发setter函数，执行一些操作。例如
姓： {{firstName}}
名： {{lastName}}
姓名：{{fullName}}
data(){return{ firstName:'wang', lastName:'leilei'} }, computed: { fullName: {//getter用于读取get: function() {returnthis.firstName+' '+this.lastName; }, set:function(newValue) {varnames=newValue.split(' ');this.firstName=names[0];this.lastName=names[names.length-1]; } } } }
