Vue2 计算属性computed

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

单价： 100
数量： 6   +
总价： ¥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>