計算屬性是個很好玩的東西，在這裡面可以對數據模型進行操作，·也可以使用getter，setter方法。使用的話也是非常的簡潔明瞭 這裡寫個例子 在computed屬性裡面定義一個計算price的方法，然後對data裡面的東西進行操作 下麵看一下運行結果： 然後再看一下如何使用getter、sette ...
計算屬性是個很好玩的東西，在這裡面可以對數據模型進行操作，·也可以使用getter，setter方法。使用的話也是非常的簡潔明瞭
這裡寫個例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="js/vue.min.js"></script>--> <script src="vue.min.js"></script> </head> <body> <div id="app"> 總價：{{prices}} </div> <script> var app=new Vue({ el:'#app', data:{ package1:[ { name:'iPhone 7', price:7199, 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 prices=0; for(var i=0;i<this.package1.length;i++){ prices+=this.package1[i].price*this.package1[i].count; } for (var i=0;i<this.package2.length;i++){ prices+=this.package2[i].price*this.package2[i].count; } return prices; } } }) </script> </body> </html>
在computed屬性裡面定義一個計算price的方法，然後對data裡面的東西進行操作
下麵看一下運行結果：
然後再看一下如何使用getter、setter方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <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> </body> </html>
展現出來的效果是這樣的
也是比較簡單的用法，在購物模型裡面還有金融計算類的應用裡面應該用的比較多這個屬性
