Vue计算属性侦听器

一 计算属性和侦听器
计算属性：某些结果是基于之前数据实时计算出来的，我们可以利用计算属性来完成。
侦听器：Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

代码

<!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
<ul>
   <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
   <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
   <li>总价：{{totalPrice}}</li>
</ul>
<script>
 //watch可以让我们监控一个值的变化。从而做出相应的反应。
 new Vue({
     el: "#app",
     data: {
         xyjPrice: 99.98,
         shzPrice: 98.00,
         xyjNum: 1,
         shzNum: 1,
         msg: ""
     },
     computed: {
         totalPrice() {
             return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
         }
     },
     watch: {
         xyjNum(newVal, oldVal) {
             if (newVal >= 3) {
                 this.msg = "库存超出限制";
                 this.xyjNum = 3
             } else {
                 this.msg = "";
             }
         }
     },
 })
</script>