效果:点击增加数量按钮,计算属性-总价将自动变化;methods方法计算的属性也将自动变化
100
¥600
¥600
代码:
<div id="app"> <p><label>单价:</label> <input type="text" v-model="price"></p> <p><label>数量:</label> <input type="text" v-model="count"> <button @click="increase"> + </button></p> <p><label>总价:</label> {{ total }}</p> <p><label>总价:</label> {{ total2() }}</p> </div> <script> var vm = new Vue({ el:"#app", data:{ price:100, count:3 }, computed:{ total:function () { return "¥" + this.price * this.count; } }, methods:{ increase:function () { this.count++; }, total2:function () { return "¥" + this.price * this.count; } } }); </script>