vue基础属性之计算属性

计算属性 computed

变量的计算不能直接写在template中,应该通过computed属性来计算。
computed属性中定义好的计算变量结果可以直接用在template中。
当计算表达式中的变量发生变化时,结果也会自动发生变化。

 

var app = Vue.createApp({

data(){

return{

count : 2,

price : 5

}

},

computed: { total(){ return this.price * this.count; } }, template: `<div>{{total}}</div>`

 

})

 

当price或者count发生变化时,total也会自动相应发生变化。


实际上将相同的计算过程写在methods函数中,也可以实现相同的效果。
那么computed和methods的区别是什么呢?

computed和methods的区别

computed:计算属性依赖的变量发生变化时,才会重新执行计算。
methods:只要页面重新渲染了,就会重新执行计算。

posted @ 2022-05-12 17:35  又等花开风起  阅读(80)  评论(0)    收藏  举报