vue--计算属性3--computed--购物车总价计算demo_计算属性统计购物车中的商品总价。要求:保留两位小数,并在总金额前添加人名币符号-优快云博客

本文链接：https://blog.youkuaiyun.com/DcTbnk/article/details/107214460

本文介绍了一个使用Vue计算属性实现购物车功能的实例，包括全选、反选和总价计算。通过计算属性，当数据变化时，能自动更新相关计算结果。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <!--  -->

    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

</head>

<body>
    <!-- 计算属性就是数据依赖项发生改变之后会进行重新的计算 -->
    <!-- html -->
    <div id="app">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">全选和反选</h3>
            </div>
            <div class="panel-body">

                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model="checkAll">
                        全选
                    </label>
                    <label>
                        <input type="checkbox" v-model="checkNo">
                        反选
                    </label>
                </div>

                <ul class="list-group">
                    <li class="list-group-item" v-for="(item,index) in list" :key="item.id">

                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="item.checked">
                                {{item.name}}
                            </label>
                            ￥ {{item.price}}
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <button type="button" class="btn btn-default" @click="item.nums>1?item.nums-=1:1">-</button>
                            数量：{{item.nums}}
                            <button type="button" class="btn btn-default" @click="item.nums+=1">+</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            小计：{{item.nums*item.price}}

                        </div>

                    </li>
                </ul>
                <p>总价：{{sumPrice}}</p>

                <button type="button" class="btn btn-info btn-block" @click="save">提交</button>

            </div>
        </div>

    </div>

    <!-- js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: [{
                        id: 1,
                        name: '摇摇乐奶昔',
                        checked: true,
                        price: 6,
                        nums: 2,
                    },
                    {
                        id: 2,
                        name: '抹茶星冰乐',
                        checked: true,
                        price: 35,
                        nums: 1,
                    },
                    {
                        id: 3,
                        name: '红糖拿铁',
                        checked: true,
                        price: 20,
                        nums: 3,
                    },
                    {
                        id: 4,
                        name: '芒果星冰乐',
                        checked: true,
                        price: 36,
                        nums: 5,
                    },

                ],
            },
            // computed计算属性，
            //  他有一个特点，可以依赖当前数据改变之后进行重新计算
            //  应用场景 数据改变之后会影响某一项结果
            computed: {
                //全选
                checkAll: {
                    // 设置值,当点击全选按钮的时候触发
                    set(v) {
                        this.list.forEach(item => {
                            item.checked = v
                        });
                    },
                    // 取值,当列表中的选择改变之后触发
                    get() {
                        return this.list.length === this.list.filter(item => item.checked == true).length;
                    },
                },
                //反选
                checkNo: {
                    set() {
                        this.list.forEach(item => {
                            item.checked = !item.checked;
                        });
                    },
                    get() {
                        // return this.list.length === this.list.filter(item => item.checked == true).length;
                    },
                },
                // 总价计算
                sumPrice() {
                    return this.list
                        .filter(item => item.checked)
                        /* reduce*******************************
                        arr.reduce(function (prev, cur, index, arr) {
                            ...
                        }, init);

                        arr 表示原数组；
                        prev 表示上一次调用回调时的返回值， 或者初始值 init;
                        cur 表示当前正在处理的数组元素；
                        index 表示当前正在处理的数组元素的索引， 若提供 init 值， 则索引为0， 否则索引为1；
                        init 表示初始值。
                        常用的参数只有两个： prev 和 cur
                        求数组项之和
                        var sum = arr.reduce(function (prev, cur) {
                            return prev + cur;
                        }, 0); */
                        .reduce((pre, cur) => {
                            return pre + cur.nums * cur.price;
                        }, 0);
                },
            },
            methods: {
                save() {
                    console.log(this.list.filter(item =>
                        item.checked
                    ));
                }
            },
        });
    </script>
</body>

</html>