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,但是在控制台输入:
