效果:点击增加数量按钮,计算属性-总价将自动变化;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>
本文通过一个简单的Vue.js应用示例介绍了如何使用计算属性(computed)和methods来展示总价的变化。当用户更改数量时,计算属性和methods方法会自动更新总价。

被折叠的 条评论
为什么被折叠?



