Vue:计算属性

在讲解计算属性之前先来看下面的一个例子：

需求：外卖套餐A每份15元，客户点了3份，总价打八折，配送费5元，要求在界面显示总价，代码如下：

<template>
    <div>
        <div>您购买了{{info.name}}共{{info.count}}份</div>
        <h1>总价：{{info.count*info.price*info.sale+info.freight}}元</h1>
    </div>
</template>

<script>
export default {
    name:'Test',
    data(){
        return{
            info:{
                userId:1,
                price:15,
                name:'套餐A',
                count:3,
                sale:0.8,
                freight:5
            }
        }
    }
}
</script>

界面运行效果：