其他分享
首页 > 其他分享> > Vue:计算属性

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>

界面运行效果:

 

标签:info,count,Vue,总价,name,price,计算,freight,属性
来源: https://www.cnblogs.com/dotnet261010/p/10799095.html