购物车结算案例（详解v-model和计算属性）

案例的效果如图：

 这确实是个很简单很基础的案例，只需要用到v-model和计算属性就完事了，当然有人会说可以不用计算属性，用插值表达式就可以完成，这确实没错，只是计算属性用起来代码不至于看上去显得那么臃肿。

正好总结一下v-model和计算属性 以及计算属性和插值表达式的区别：

v-model：

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

所以，我们只能在具有value属性的元素上使用v-model，我们可以使用 v-model 指令在 <input> 及 <textarea> 元素上进行双向数据绑定，负责监听用户的输入事件以更新数据。

不过也有一点特殊的地方，就是当在复选框中使用的时候，即<input>的type属性等于checkbox时，此时v-model所绑定的不再是value属性，而是checked属性。

计算属性（computed）:

Vue的计算属性：

1.在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。

2.通过getter\setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。

通俗来讲，计算属性相当于data里的属性做计算得到的新属性，什么时候执行：初始化显示/ 相关的data属性发生变化时；里面包含两个回调函数get()和set()：

get()：当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值

set()：监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据

一般我们只使用的到getter，这也是计算属性的默认用法，而getter必须有返回值，返回的就是计算属性这个新属性值。

至于说setter，在你需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作，如图：

绝大多数情况下，我们只会用默认的getter 方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter 都声明。

对于计算属性和插值表达式的区别，其实很简单，总结起来就是：两种方式的最终结果确实是完全相同的，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。