从methods里面调用
当我们通过methods中的方法进行计算时,vue会调用methods中包含的所有方法
在最底部完整代码中,如果我要计算age + a的值,那么会调用addA,addB这两个方法.
从computed属性里面调用
就只会执行对应的方法,如果我要计算age + a的值,那么会调用addA这两个方法.在某些情况下性能更高.
注意点
-
methods调用方法:{{addA()}} -
computed调用方法:{{addA}}(少个括号)
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Third Day</title>
<script src="../1/vue.js"></script>
</head>
<body>
<div id="app">
<h1>computed属性</h1>
<button v-on:click="a++">a加一</button>
<button v-on:click="b++">b加一</button>
<br>
<p>{{a}},{{b}}</p>
<!--通过methods方式,是所有方法都会遍历执行-->
<!--<p>age + a = {{addA()}}</p>-->
<!--<p>age + b = {{addB()}}</p>-->
<!--通过计算属性去操作,只会执行对应的方法,性能更好-->
<p>age + a = {{addA}}</p>
<p>age + b = {{addB}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
age:20,
a:0,
b:0
},
methods:{
/*
addA:function () {
return this.age + this.a;
},
addB:function () {
return this.age + this.b;
}
*/
},
computed:{
addA:function () {
return this.age + this.a;
},
addB:function () {
return this.age + this.b;
}
}
});
</script>
</body>
</html>
网友评论