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>
複制