Vue入门之计算属性和监听器

六.计算属性和监听器
6.1计算属性 computed
6.1.1存在问题
插值表达式, 可以完成表达式的计算,如果逻辑复杂时,将很难维护. 例如:

{{ message.split('').reverse().join('') }}

6.1.2基本使用
Vue计算属性computed就是用来处理复杂逻辑的. 当data区域的数据变更是,将进行自动计算.

案例：字符串倒排

{{showMessage}}

6.1.3computed和methods区别

• 计算属性，用于实时计算，只要数据发生了更改才计算。缓存计算结果。
• 方法，每次调用都执行

计算属性

{{showCount}}
{{showCount}}

普通方法

{{showCount2()}}
{{showCount2()}}

6.1.4案例：购物车

编号	标题	单价	购买数量	小计
{{index+1}}	{{book.title}}	{{book.price}}	- {{book.count}} +	{{book.price * book.count}}
			总价：{{totalPrice}}

6.1.5高级使用

• 计算属性提供了setter方法对属性进行修改

}
},
})

案例：拆分姓名 （第一版）

请输入姓名：

姓：{{firstname}}

名：{{secondname}}

6.2监听器 watch

6.2.1什么是监听器

监听数据的变化

})

6.2.2基本语法

• 案例：拆分姓名 （第二版）

请输入姓名：

姓：{{firstname}}

名：{{secondname}}

6.2.3高级使用：监听对象属性

• 案例：拆分姓名 （第三版）

请输入姓名：

姓：{{firstname}}

名：{{secondname}}