计算属性
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每次都会调用重新计算一次。