vue-购物车基本代码

z先生1025

已于 2022-05-05 11:43:37 修改

阅读量2k

点赞数 2

分类专栏： web小功能文章标签： vue js checkbox

于 2020-04-19 16:47:32 首次发布

本文链接：https://blog.csdn.net/weixin_44326007/article/details/105617789

版权

web小功能专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue 编写购物车原来直接复制可直接在浏览器运行测试

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="box">
        全选<input type="checkbox" @change.self='allchecked()' v-model='isAllchecked'>

        <ul>
            <li v-for='data in datalist'>
                <input type="checkbox" v-model='checkgroup' :value='data' />
                {{data}}
                <button @click='handleDel(data)'>-</button>
                {{data.num}}
                <button @click='data.num++'>+</button>
            </li>
        </ul>
        <div>{{checkgroup}}</div>
        <div>总金额：{{getSum()}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                checkgroup: [],
                isAllchecked: false,
                datalist: [
                    {
                        name: '商品1',
                        price: 52,
                        num: 3,
                        id: 1
                    },
                    {
                        name: '商品2',
                        price: 15,
                        num: 1,
                        id: 2
                    },
                    {
                        name: '商品3',
                        price: 46,
                        num: 1,
                        id: 3
                    },
                ]
            },
            methods: {
                getSum() {
                    // console.log(this.checkgroup)
                    let sum = 0;
                    this.checkgroup.forEach(e => {
                        sum += e.num * e.price
                    });
                    if(this.checkgroup.length == this.datalist.length){
                        this.isAllchecked = true
                    }else{
                        this.isAllchecked = false
                    }
                    return sum
                },
                allchecked() {
                    console.log(this.isAllchecked)
                    if(this.isAllchecked){
                        this.checkgroup = this.datalist
                    }else{
                        this.checkgroup = []
                    }
                },
                handleDel(data){
                    console.log(data.num)
                    var number = data.num--

                    if(number === 1 ){
                        data.num = 1
                    }
                }
            },
        })
    </script>
</body>

</html>

z先生1025

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue-购物车基本代码

vue 编写购物车原来直接复制可直接在浏览器运行测试<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
复制链接

扫一扫

专栏目录