一个例子读懂vue计算属性

下面的例子我们想在改变a的值的时候改变a+num的值，改变b的时候改变b+num的值。

<div id="app">
		<button @click='a++'>a+1</button>
		<button @click='b++'>b+1</button>
		<p>a={{a}}</p>
		<p>b={{b}}</p>
		<p>a+{{num}}={{sumA()}}</p>
		<p>b+{{num}}={{sumB()}}</p>
	</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			'a':1,
			'b':1,
			'num':1
		},
		methods:{
			sumA:function(){
				console.log('执行了方法sumA');
				return this.a + this.num
			},
			sumB:function(){
				console.log('执行了方法sumB');
				return this.b + this.num
			}
		},
	})
</script>

可以我们发现点击了那个按钮，下面的两个计算都会被执行，和原来的想法不一致，改成computed.

<div id="app">
		<button @click='a++'>a+1</button>
		<button @click='b++'>b+1</button>
		<p>a={{a}}</p>
		<p>b={{b}}</p>
		<p>a+{{num}}={{sumA}}</p>
		<p>b+{{num}}={{sumB}}</p>
	</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			'a':1,
			'b':1,
			'num':1
		},
		computed:{
			sumA:function(){
				console.log('执行了方法sumA');
				return this.a + this.num
			},
			sumB:function(){
				console.log('执行了方法sumB');
				return this.b + this.num
			}
		},
	})
</script>

这样当我们点击了增加a的按钮时，只会调用sumA，点击增加b的按钮时只会调用sunB,完成需求

PS：在html中显示计算属性时不需要写成sumA(),sumB(),把()去掉