Vue笔记:计算属性&侦听器

(已经使用脚手架。)

计算属性-computed

用计算属性,主要是因为有时候使用了复杂逻辑,使模板不再是简单的声明式逻辑,比如翻转字符串,要看一会才明白这一段的逻辑是在翻转,如果声明一个计算属性reverseMessage,再使用到模板里,我们看到就知道这里是在进行翻转字符串的操作。感觉简单点说其实就其实是调用逻辑。

Vue笔记:计算属性&侦听器

Vue笔记:计算属性&侦听器

侦听器-watch

更加适用于数据变动的情况,简单点的例子比如说,点击按钮,输出每次点击的次数,次数达到多少时就触发一个什么操作,响应数据的变化。

这里是当点击次数超过5时,将元素背景置为天蓝色(加了一个styleObj对象):

Vue笔记:计算属性&侦听器

Vue笔记:计算属性&侦听器