1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    8. </head>
    9. <body>
    10.     <div id="app">
    11.         <input type="number" v-model.number="price">
    12.         <input type="number" v-model.number="count">
    13.         {{sum}}
    14.     </div>
    15.     <script>
    16.         new Vue({
    17.             el:"#app",
    18.             data:{
    19.                 price:3,
    20.                 count:10
    21.             },
    22.             /* 当data中参与计算的值改变的时候会触发 */
    23.             computed:{
    24.                 sum(){
    25.                     return this.price*this.count
    26.                 }
    27.             }
    28.         })
    29.     </script>
    30. </body>
    31. </html>