Vue.js学习笔记（六）--------计算属性

计算属性

computed用法：

   如果运算过程比较复杂，那么维护起来就比较麻烦。所以可以把运算过程，都放在computed里去，只用显示运算结果就好了。

   method 也能达到一样的效果，调用的时候，要加上括号，不然拿不到数据。

效果图：

代码：

<div id="div1">
		人民币：<input type="number" v-model.number="rmb"><br>
		汇率：<input type="number" v-model.number="huilv"><br>
		换算后1：
		<!--用computed方法-->
		{{huansuan1}}
		<br>
		换算后2：
		<!--用methods方法-->
		{{huansuan2()}}
	</div>
	
	<script>
		new Vue({
			el:"#div1",
			data:{
				rmb:0,
				huilv:6.6,
			},
			computed:{
				huansuan1:function(){
					return this.rmb/this.huilv;
				}
			},
			methods:{
				huansuan2:function(){
					return this.rmb/this.huilv;
				}
			}
		})
	</script>

 computed 和 methods 的区别：

   computed 是有缓存的，只要rmb没有变化，huansuan1会直接返回以前计算出来的值，而不会再次计算。 这样如果是复杂计算，就会节约不少时间。
   而methods每次都会调用重新计算一次。