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