咳咳，第一次写博客，有点小紧张，这次我将给大家带来一个vue.js实现购物车的小项目，如有不足请严厉指出。

购物车功能有：全选和选择部分商品，选中商品总价计算，商品移除，以及调整购买数量等功能。

js
主要有以下方法

加函数，减函数，手动修改数量判断库存函数，总价格计算函数，单选事件，全选事件，一共分为6个事件

具体效果如下图


代码在这里

main.js
'use strict'

var app = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: 'iPhone 7',
                price: 6188,
                count: 1,
                check: true,
            },
            {
                id: 2,
                name: 'iPad Pro',
                price: 5888,
                count: 1,
                check: false,
            },
            {
                id: 3,
                name: 'MacBook Pro',
                price: 21488,
                count: 1,
                check: true,
            },
        ]
    },
    methods: {
        remove: function (index) {  //移除商品
            this.list.splice(index, 1);
        },
        reduce: function (index) {  //减少商品
            this.list[index].count --;
        },
        add: function (index) { //增加商品
            this.list[index].count ++;
        },
        selAll: function () {   //商品全选
            let isAll = document.querySelector('#all');

            if (isAll.checked == true) {
                this.list.forEach(function(item, index) {
                    item.check = true;
                })  
            } else {
                this.list.forEach(function(item, index) {
                    item.check = false;
                })  
            }
        }
    },
    computed: {
        totalPrices: function () {  //计算总价
            let totalPrices = 0;

            this.list.forEach(function (val, index) {
                if (val.check == true)
                    totalPrices += parseFloat(val.price * val.count);
            })

            return totalPrices.toString().replace(/\B(?=(\d{3})+$)/g, ','); //每三位数中间加一个‘，’
        }
    }
})




index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
                <tr>
                    <th>全选<input id="all" @click="selAll" type="checkbox" checked></th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <template v-for="(item, index) in list">
                    <tr>
                        <td>
                            <input type="checkbox" :checked="item.check" @click="item.check = !item.check">
                        </td>
                        <td>
                            {{ item.name }}
                        </td>
                        <td>
                            {{ item.price }}
                        </td>
                        <td>
                            <button @click="reduce(index)" :disabled="item.count == 1">-</button>
                            {{ item.count }}
                            <button @click="add(index)">+</button>                            
                        </td>
                        <td>
                            <button @click="remove(index)">移除</button>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
        <div>总价: ￥ {{ totalPrices }}</div>
    </template>
    <template v-else>
        购物车没有商品
    </template>
</div>

<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>

main.css
[v-cloak] {
  display: none;  
}

#app {
    width: 500px;
    margin: 0 auto;
}

table {
    width: 100%;
    border: 1px solid #444;
    border-collapse: collapse;
}

th, td {
    padding: 8px 16px;
    border: 1px solid #444;
    text-align: left;
}

th {
    background: #89abd3;
    color: rgb(214, 224, 235);
    font-weight: 600;
    white-space: nowrap;
}





# javascript # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue