VUE-购物车

本文主要是介绍VUE-购物车，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div id="app" style="width: 1000px;margin: 0 auto;">

    <form style="margin-bottom: 100px;">
        <div class="form-group">
            <label for="exampleInputEmail1">商品名称：</label>
            <input type="text" class="form-control" placeholder="请输入商品名称(任意字符2-16位)" style="width: 500px;" v-model="goods_name">
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">商品单价：</label>
            <input type="text" class="form-control" placeholder="请输入商品单价(保留两位小数)" style="width: 500px;" v-model="goods_price">
        </div>

        <button type="button" class="btn btn-primary" @click="add">立即添加</button>

        <p v-for="(v,k) in errors">
            {{v}}
        </p>
    </form>




    <input type="text" class="form-control" style="margin: 10px 0;width: 500px;" placeholder="请输入商品名称进行搜索" v-model="word">

    <table class="table table-striped">
        <thead class="thead-light">
        <tr>
            <th scope="col"></th>
            <th scope="col">商品ID</th>
            <th scope="col">商品名称</th>
            <th scope="col">商品单价</th>
            <th scope="col">商品数量</th>
            <th scope="col">商品小计</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(v,k) in result">
            <th scope="row">
                <input type="checkbox" v-model="v.is_check">
            </th>
            <td>{{v.id}}</td>
            <td>{{v.name}}</td>
            <td>{{v.price.toFixed(2)}}</td>
            <td>
                <button type="button" class="btn btn-primary" @click="jia(k)">+</button>
                {{v.num}}
                <button type="button" class="btn btn-primary" @click="jian(k)">-</button>
            </td>
            <td>{{v.sum_price.toFixed(2)}}</td>
            <td>
                <button type="button" class="btn btn-danger" @click="del(k)">删除</button>
            </td>
        </tr>

        </tbody>
    </table>

    <p>
        <button type="button" class="btn btn-primary" @click="allCheck">全选</button>
        <button type="button" class="btn btn-primary" @click="noCheck">全不选</button>
        <button type="button" class="btn btn-primary" @click="unCheck">反选</button>
        <button type="button" class="btn btn-danger" @click="allDel">批量删除</button>


        当前选中商品数为：<span style="color: red;">{{goods_count}}</span>
         
        总价：<span style="color: red;">{{goods_sum}}</span>
    </p>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        computed: {
            result() {
                if (this.word == '') {
                    return this.list
                } else {
                    var obj = this
                    var arr = []
                    this.list.map(function(v) {
                        if (v.name.indexOf(obj.word) > -1) {
                            arr.push(v)
                        }
                    })
                    return arr
                }

            },
            goods_count() {
                var num = 0; //默认数量为0
                this.list.map(function(v) {
                    if (v.is_check) {
                        num += 1
                    }
                })
                return num
            },
            goods_sum() {
                var price = 0;
                this.list.map(function(v) {
                    if (v.is_check) {
                        price += v.sum_price
                    }
                })

                return price.toFixed(2)
            }
        },
        methods: {
            add() {
                if (this.validate() == 0) {
                    var obj = {
                        id: this.list.length+1,
                        name: this.goods_name,
                        price: Number(this.goods_price),
                        num: 1,
                        sum_price: Number(this.goods_price),
                        is_check: false
                    }

                    this.list.push(obj)
                }
            },
            validate() {
                this.errors = []
                if (this.goods_name == '') {
                    this.errors.push('商品名称必须填写')
                } else {
                    var reg = /^[\u4e00-\u9fa5\w]{2,16}$/i
                    if (!reg.test(this.goods_name)) {
                        this.errors.push('商品名称为2-16位任意字符')
                    }
                }

                if (this.goods_price == '') {
                    this.errors.push('商品价格必须填写')
                } else {
                    var reg = /^\d+\.\d{2}$/
                    if (!reg.test(this.goods_price)) {
                        this.errors.push('商品价格保留两位小数')
                    }
                }

                return this.errors.length


            },
            jia(k) {
                //最终的数量等于原来的数量+1
                var last_num = this.list[k].num + 1 >= 5 ? 5 : this.list[k].num + 1
                //计算小计
                this.list[k].sum_price = last_num * this.list[k].price
                //将数量替换一下
                this.list[k].num = last_num
            },
            jian(k) {
                //最终的数量等于原来的数量-1
                var last_num = this.list[k].num - 1 <= 1 ? 1 : this.list[k].num - 1
                //计算小计
                this.list[k].sum_price = last_num * this.list[k].price
                //将数量替换一下
                this.list[k].num = last_num
            },
            del(k) {
                var res = confirm('您确定要删除吗？')
                if (res) {
                    this.list.splice(k, 1)
                }
            },
            allCheck() {
                this.list.map(function(v) {
                    if (v.is_check == false) {
                        v.is_check = true
                    }
                })
            },
            noCheck() {
                this.list.map(function(v) {
                    if (v.is_check) {
                        v.is_check = false
                    }
                })
            },
            unCheck() {
                this.list.map(function(v) {
                    if (v.is_check) {
                        v.is_check = false
                    } else {
                        v.is_check = true
                    }
                })
            },
            allDel() {
                var new_arr = []
                this.list.map(function(v) {
                    if (v.is_check == false) {
                        new_arr.push(v)
                    }
                })

                this.list = new_arr
            }
        },
        data: {
            errors: [],
            goods_name: '',
            goods_price: '',
            word: '',
            list: [{
                id: 1,
                name: '充气达达',
                price: 20.01,
                num: 1,
                sum_price: 20.01,
                is_check: false
            },
                {
                    id: 2,
                    name: '充气鹏鹏',
                    price: 99.99,
                    num: 1,
                    sum_price: 99.99,
                    is_check: false
                },
                {
                    id: 3,
                    name: '充气安韩',
                    price: 33.33,
                    num: 1,
                    sum_price: 33.33,
                    is_check: false
                },
                {
                    id: 4,
                    name: '洁鹏洗面奶',
                    price: 9.9,
                    num: 1,
                    sum_price: 9.9,
                    is_check: false
                },
                {
                    id: 5,
                    name: '洁鹏床上用品/套',
                    price: 500,
                    num: 1,
                    sum_price: 500,
                    is_check: false
                }
            ]
        }
    })
</script>
这篇关于VUE-购物车的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
Javascript

VUE-购物车

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯
