github地址:https://github.com/manlili/vue_learn里面的lesson06
一 計算屬性定位
當一些數據需要根據其它數據變化時,這時候就需要計算屬性
二 $watch實現計算屬性
舉個栗子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue計算屬性</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> a的值是{{a}} b的值是{{b}} </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { a: 1, b: 0 } }) myVue.$watch("a",function () { this.b = this.a+3; }) </script> </body> </html>
正常輸出時:a的值是1,b的值為0,但是當在控制台輸入:
說明b的數據是根據a變化而變化的
三 computed實現計算屬性
上面用$watch可以實現計算屬性,但是有點麻煩,首先需要定義b,實例化以后給實例綁定一個$watch方法,下面來看一個更簡單的方法實現計算屬性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue計算屬性</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> a的值是{{a}} b的值是{{b}} </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { a: 1 }, computed: { b: function () { return this.a+3; } } }) </script> </body> </html>
上面正常的輸出是:a的值是1,b的值是4,但是在控制台輸入:
說明b的數據是根據a變化而變化的
四 set實現反計算
多數時候a變化,b跟着a變化,但是有時候我們想讓b變化時,a跟着b變化,Vue作者給我們提供了set方法來反計算.
舉個栗子:(get是b獲取值,set是給b賦新值)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue計算屬性</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> a的值是{{a}} b的值是{{b}} </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { a: 1 }, computed: { b:{ get: function () { return this.a+3; }, set: function (newValue) { //參數不能少 this.a = newValue-1; //a的值變化也會導致b變化 } } } }) </script> </body> </html>
上面正常的輸出是:a的值是1,b的值是4,但是在控制台輸入:
