Vue2 计算属性computed

来源：互联网发布：ipad淘宝网下载编辑：程序博客网时间：2024/06/06 09:31

效果：点击增加数量按钮，计算属性-总价将自动变化；methods方法计算的属性也将自动变化

单价： 100

数量： 6 +

总价： ¥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>

阅读全文

0 0