黎明降至 2022-03-20 20:25 采纳率: 55.6%
浏览 45

VUE设计购物车合计功能有时失误有时成功

img


合计功能代码

img

img

只要刷新页面，第一次点全选就不能计算总金额，如果第一次单点商品就可以计算

有时合计不到，有时又可以不知是为什么，要刷新才可以。

  • 写回答

1条回答 默认 最新

  • 随风4928579 2022-03-20 21:42
    关注

    购物车的这些功能写在计算属性里面 你这个只写了get方法 还要写set方法 我有一套类似的 你可以看一下学习

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

<head>
    <!-- 破除防盗链 -->
    <meta name='referrer' content='never'>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <!-- 引入的js文件 -->
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
    <title></title>
    <style>
        * {
            user-select: none;
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #app {
            width: 80%;
            margin: 0 auto;
            text-align: center;
        }

        table {
            margin-top: 100px;
            width: 400px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id='app'>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <label for="qx">全选</label>
                    <input type="checkbox" id="qx" v-model="isAll">
                </td>
                <td>
                    商品名称
                </td>
                <td>
                    商品价格
                </td>
                <td>
                    商品数量
                </td>
            </tr>

            <tr v-for="(item,index) in iceCream" :key="item.id">
                <td>
                    <label :for="item.id">全选</label>
                    <input type="checkbox" :id="item.id" v-model="item.ischeck">
                </td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>

            </tr>
            <tr>
                <td>总计</td>
                <td colspan="3">{{and}}</td>
            </tr>
        </table>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        el: '#app',
        // 数据
        data: {
            iceCream: [
                {
                    id: 98,
                    name: '哈根达斯',
                    num: 10,
                    price: 98,
                    ischeck: false
                },
                {
                    id: 56,
                    name: '八喜',
                    num: 1,
                    price: 48,
                    ischeck: true
                },
                {
                    id: 102,
                    name: '冰雪皇后',
                    num: 1,
                    price: 29,
                    ischeck: false
                },
                {
                    id: 106,
                    name: '蒙牛',
                    num: 10,
                    price: 4,
                    ischeck: true
                }
            ]
        },
        // 方法
        methods: {

        },
        // 计算属性
        computed: {
            // 给全选按钮添加了 双向数据绑定 用于计算
            isAll: {
                // 获取访问data 数据的值的时候 调用
                get() {
                    return this.iceCream.every(function (el) {
                        return el.ischeck
                    })
                },
                // 修改data数据的值的时候调用
                set(value) {
                    this.iceCream.forEach(element => {
                        element.ischeck = value;
                    });
                }
            },
            and() {
                // 返回
                // 传入 初始值和结果
                return this.iceCream.reduce(function (cur, val) {
                    // 当每一项的 val.ischeck是true的时候 给他计算 出来
                    if (val.ischeck) {
                        return cur + val.num * val.price;
                    } else {
                        return cur;
                    }
                }, 0)
            }
        }
    })
</script>
    评论

报告相同问题？

问题事件

  • 修改了问题 3月21日
  • 修改了问题 3月20日
  • 修改了问题 3月20日
  • 修改了问题 3月20日
  • 展开全部

悬赏问题

  • ¥65 Tree 树形控件实现单选功能,可以使用element也可以手写一个,实现全选为全选状态
  • ¥60 寻抓云闪付tn组成网页付款链接
  • ¥20 如何通过sentry收集上传Android ndk的崩溃？
  • ¥30 有关数值生成的稳健性探讨
  • ¥20 关于C/C++图形界面设计问题
  • ¥15 QT+Gstreamer框架开发视频采集,无法将waylandsink视频绑定qt窗口
  • ¥15 vs2010开发 WFP（windows filtering platform）异常
  • ¥30 8*8*25的矩阵和1*8*25的矩阵相乘
  • ¥15 Ubuntu20.04主机有两个网口,如何配置将其中一个网口用来接入外网,另一个网口用来给其他设备上网
  • ¥15 ml307r-dl如何实现录音功能