1. <body>
    2.     <div id="app">
    3.         <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成 -->
    4.         <ul>
    5.             <li>西游记； 价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
    6.             <li>水浒传； 价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"> </li> 
    7.             <li>总价：{{totalPrice}}</li>
    8.             {{msg}}
    9.         </ul>
    10.     </div>
    11.     <script src="../node_modules/vue/dist/vue.js"></script>
    13.     <script>
    14.         //watch可以让我们监控一个值的变化。从而做出相应的反应。
    15.         new Vue({
    16.             el: "#app",
    17.             data: {
    18.                 xyjPrice: 99.98,
    19.                 shzPrice: 98.00,
    20.                 xyjNum: 1,
    21.                 shzNum: 1,
    22.                 msg: ""
    23.             },
    24.             computed: {
    25.                 totalPrice(){
    26.                     return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
    27.                 }
    28.             },
    29.             watch: {
    30.                 xyjNum(newVal,oldVal){
    31.                     if(newVal>=3){
    32.                         this.msg = "库存超出限制";
    33.                         this.xyjNum = 3
    34.                     }else{
    35.                         this.msg = "";
    36.                     }
    37.                 }
    38.             },
    39.         })
    40.     </script>
    41. </body>