vue 合计功能

最新推荐文章于 2025-07-24 13:52:15 发布

Alice9969

最新推荐文章于 2025-07-24 13:52:15 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 合计实战

本文链接：https://blog.youkuaiyun.com/Alice9969/article/details/78917324

vue 专栏收录该内容

14 篇文章

订阅专栏

本文展示了一个使用Vue.js实现的动态计算商品总价的功能。通过遍历商品信息数组，根据商品选中状态累加价格，并利用自定义过滤器格式化价格显示到两位小数。点击商品条目可以切换其选中状态，总价会实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合计效果</title>
    <!--<script src="../static/js/vue.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .textRight{
            text-align: right;
        }

        .infoList{
            width: 700px;
            height: auto;
            padding: 20px;
            margin: 10% auto;
            background-color: mediumseagreen;
        }
        .sequense{
            display: inline-block;
            width: 20px;
        }
        .goodsPrice{
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        .goodsPrice:after{
            content: "元";
        }
        ul li{
            display: inline-block;
            height: 30px;
            width: 80%;
            line-height: 30px;
            background-color: #eeeeee;
            list-style: none;
            padding: 5px;
            margin: 5px;
        }
        ul li.active{
            background-color: hotpink !important;
        }
        .togglePrice{
            display: inline-block;
            width: 300px;
            text-align: left;
        }
        .textRight{
            text-align: right;
        }
    </style>
</head>

<body>
<div id="app" v-cloak>
    <div class="infoList">
        <ul>
            <li v-for="(item , key) in GoodsInfo" @click="Choose(item)" v-bind:class="{active: item.isActive}">
                <span class="sequense">{{key + 1}}</span>
                <span class="goodsName">{{item.name}}</span>
                <span class="goodsPrice">{{item.price | priceFormat}}</span>
            </li>
        </ul>
        <h3 class="textRight"><span class="togglePrice">合计：{{total()}}</span></h3>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            GoodsInfo: [
                {
                    'name': '苹果',
                    'price': 220,
                    'isActive': false
                },
                {
                    'name': '西瓜',
                    'price': 300.226,
                    'isActive': false
                },
                {
                    'name': '草莓',
                    'price': 40.2,
                    'isActive': false
                }
            ]
        },
        methods: {
            Choose: function (data) {
                data.isActive = !data.isActive;
            },
           total: function(i){
                var togglePrice = 0;
                this.GoodsInfo.forEach(function(data){
                   if( data.isActive){
                       togglePrice += data.price;
                   }
                });
                return togglePrice;
           }
        },
        filters: {
            priceFormat: function(value){
                value = Number(value); //字符类型转成数字
                return value.toFixed(2);
            }
        }
    });
</script>



</body>
</html>