浏览量 4485
2019/01/02 11:56
1.打开浏览器开发者模式,点击按钮Add to A:
Add to A
Add to B
2.点击按钮Add to B:
Add to A
Add to B
methods方法会将methods里面的两个方法函数都去执行。
3.点击按钮Add to C:
Add to A
Add to B
Add to C
4.点击按钮Add to D:
Add to A
Add to B
Add to D
computed只会执行自己对应的方法,但是也会带上methods里面的方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>methods_and_computed</title>
</head>
<body>
<div id="vue-app">
<h1>Methods</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A - {{ a }} </p>
<p>B - {{ b }} </p>
<p>Age + A = {{ addToA()}}
<p>Age + B = {{ addToB()}}
<h1>Computed</h1>
<button v-on:click="c++">Add to C</button>
<button v-on:click="d++">Add to D</button>
<p>C - {{ c }} </p>
<p>D - {{ d }} </p>
<p>Age + C = {{ addToC }}
<p>Age + D = {{ addToD }}
</div>
<script src="/static/js/vue.min.js"></script>
<script>
new Vue({
el: "#vue-app",
data: {
a: 0,
b: 0,
c: 0,
d: 0,
age: 20
},
methods: {
addToA: function () {
console.log("Add to A");
return this.a + this.age;
},
addToB: function () {
console.log("Add to B");
return this.b + this.age;
}
},
computed: {
addToC: function () {
console.log("Add to C");
return this.c + this.age;
},
addToD: function () {
console.log("Add to D");
return this.d + this.age;
}
}
});
</script>
</body>
</html>
上一篇 搜索 下一篇