模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example"> {{ message.split('').reverse().join('') }} </div>
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。
所以,对于任何复杂逻辑,你都应当使用计算属性。
比如原先将方法放到了methods方法下面,每点击一次dom对象,methods里的所有方法都会去执行,而放到computed属性下,则点击哪个执行哪个,对于复杂的逻辑是个优化。
下面放出我们的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>Computed计算属性</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>
<p>Age+B = {{addToB}}</p>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
new Vue({
el: '#app',
data: {
age: 30,
a: 0,
b: 0
},
methods: {
},
computed: {
addToA: function(){
console.log("add to A");
return this.a + this.age;
},
addToB: function(){
console.log("add to B ");
return this.b + this.age;
}
}
});