vue.js 第五课

计算属性

1、基础例子

2、计算属性 vs $watch

3、计算 setter

4、计算属性开发实务demo

 

1、计算属性 computed（ 电脑computer） (区别普通属性)

计算属性是： mvvm模式下 计算model的资料并回传其结果。

在模板中表达式非常便利，但是他们实际上只用于简单的操作。

模板是为了描述视图的结构。

在模板中放入太多的逻辑会让模板过重且难以维护。

这就是为什么Vue.js将绑定表达式限定为一个表达式。

如果需要多余一个表达式的逻辑，应当使用计算属性。

2、计算属性与 .$watch

vue.js提供了一个方法$watch，它用于观察Vue实例上的数据变动。

当一些数据需要根据其他数据变化时，$watch可以做到，但是通常更好的方法是使用 计算属性 而不是一个命令式的$watch回调。

 

它们都有属于自己可以运作的场景。

 

计算属性默认只有一个getter，还有一个setter

实例：计算属性值 加法总和

代码：

input 框里有两个 属性 一个lazy作用：不是每次输入都计算，输入结束了才计算。

另一个number: 限定输入的必须是数字。

number貌似不好用 ，直接用type="number"好了，去掉默认样式：

input[type=number] {-moz-appearance:textfield;}

input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;}

input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;}