VUE全选/购物车

最新推荐文章于 2024-07-16 16:33:57 发布
最新推荐文章于 2024-07-16 16:33:57 发布
阅读量129 收藏
点赞数
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43778556/article/details/116856601
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        li{
            display: flex;
            justify-content: space-around;
            padding: 10px;
        }
        li img{
            width: 100px;
        }

    </style>
</head>
<body>
    <div id="box">
        <div v-if="list.length===0">购物车空空如也</div>
        <template v-else>
            <input type="checkbox" @change="handleAllChecked" v-model="isAllChecked"/>全选/全不选
            <ul>
                <li v-for="(item,index) in list" :key="item.id">
                    <input type="checkbox" v-model="checkGroup" :value="item" @change="checked()"/>
                    <img :src="item.pic" alt="">
                    <div>
                        <div>名称：{{item.name}}</div>
                        <div>价格：￥{{item.price}}</div>
                    </div>
                    <div>
                        <button @click="item.number--" :disabled="item.number===1">-</button>
                        {{item.number}}
                        <button @click ="item.number++" :disabled="item.number===item.limit">+</button>
                    </div>
                    <div>
                        <button @click="handleDelete(index,item.id)">删除</button>
                    </div>
                </li>
            </ul>
            <div style="background-color: yellow;">
                总金额：￥{{sum()}}
            </div>
        </template>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                list:[
                    {
                        name:'商品1',
                        price:34,
                        number:9,
                        id:1,
                        limit:15,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品2',
                        price:65,
                        number:2,
                        id:2,
                        limit:3,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品3',
                        price:23,
                        number:12,
                        id:3,
                        limit:15,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品4',
                        price:72,
                        number:10,
                        id:4,
                        limit:13,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                ],
                checkGroup:[],
                isAllChecked:false,
            },
            methods:{
                // 计算总金额
                sum(){
                    var total=0
                    this.checkGroup.forEach(item => {
                        total+=item.price*item.number
                    });
                    return total
                },
                // 删除
                handleDelete(index,deleteId){
                    // 删除checkGroup数组的对应的元素
                    this.checkGroup=this.checkGroup.filter(item=>item.id!=deleteId)
                    // 删除原数组
                    this.list.splice(index,1)
                    // 判断全选是否勾上
                    this.checked()
                },
                // 全选
                handleAllChecked(ev){
                    // console.log('checked==',ev.target.checked);
                    if(this.isAllChecked){
                        this.checkGroup=this.list
                    }else{
                        this.checkGroup=[]
                    }
                },
                // 判定是否全选
                checked(){
                    if(this.checkGroup.length===this.list.length){
                        this.isAllChecked=true
                    }else{
                        this.isAllChecked=false
                    }
                }
            }
        })
    </script>
</body>
</html>

=======================================
通过计算属性实现全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        li{
            display: flex;
            justify-content: space-around;
            padding: 10px;
        }
        li img{
            width: 100px;
        }

    </style>
</head>
<body>
    <div id="box">
        <div v-if="list.length===0">购物车空空如也</div>
        <template v-else>
            <input type="checkbox" v-model="isAllCheckedComputed"/>全选/全不选
            <ul>
                <li v-for="(item,index) in list" :key="item.id">
                    <input type="checkbox" v-model="checkGroup" :value="item"/>
                    <img :src="item.pic" alt="">
                    <div>
                        <div>名称：{{item.name}}</div>
                        <div>价格：￥{{item.price}}</div>
                    </div>
                    <div>
                        <button @click="item.number--" :disabled="item.number===1">-</button>
                        {{item.number}}
                        <button @click ="item.number++" :disabled="item.number===item.limit">+</button>
                    </div>
                    <div>
                        <button @click="handleDelete(index,item.id)">删除</button>
                    </div>
                </li>
            </ul>
            <div style="background-color: yellow;">
                总金额：￥{{sum()}}
            </div>
        </template>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                list:[
                    {
                        name:'商品1',
                        price:34,
                        number:9,
                        id:1,
                        limit:15,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品2',
                        price:65,
                        number:2,
                        id:2,
                        limit:3,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品3',
                        price:23,
                        number:12,
                        id:3,
                        limit:15,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品4',
                        price:72,
                        number:10,
                        id:4,
                        limit:13,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                ],
                checkGroup:[],
                isAllChecked:false,
            },
            methods:{
                // 计算总金额
                sum(){
                    var total=0
                    this.checkGroup.forEach(item => {
                        total+=item.price*item.number
                    });
                    return total
                },
                // 删除
                handleDelete(index,deleteId){
                    // 删除checkGroup数组的对应的元素
                    this.checkGroup=this.checkGroup.filter(item=>item.id!=deleteId)
                    // 删除原数组
                    this.list.splice(index,1)
                    // 判断全选是否勾上
                    this.checked()
                },
               
            },
            computed:{
                isAllCheckedComputed:{
                    set(isChecked){
                        if(isChecked){
                            this.checkGroup=this.list
                        }else{
                            this.checkGroup=[]
                        }
                    },
                    get(){
                        return this.checkGroup.length===this.list.length
                    }
                }
            }
        })
    </script>
</body>
</html>

=====================================
通过watch属性实现全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        li{
            display: flex;
            justify-content: space-around;
            padding: 10px;
        }
        li img{
            width: 100px;
        }

    </style>
</head>
<body>
    <div id="box">
        <div v-if="list.length===0">购物车空空如也</div>
        <template v-else>
            <input type="checkbox" v-model="isAllChecked"/>全选/全不选
            <ul>
                <li v-for="(item,index) in list" :key="item.id">
                    <input type="checkbox" v-model="checkGroup" :value="item" @change="checked()"/>
                    <img :src="item.pic" alt="">
                    <div>
                        <div>名称：{{item.name}}</div>
                        <div>价格：￥{{item.price}}</div>
                    </div>
                    <div>
                        <button @click="item.number--" :disabled="item.number===1">-</button>
                        {{item.number}}
                        <button @click ="item.number++" :disabled="item.number===item.limit">+</button>
                    </div>
                    <div>
                        <button @click="handleDelete(index,item.id)">删除</button>
                    </div>
                </li>
            </ul>
            <div style="background-color: yellow;">
                总金额：￥{{sum()}}
            </div>
        </template>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                list:[
                    {
                        name:'商品1',
                        price:34,
                        number:9,
                        id:1,
                        limit:15,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品2',
                        price:65,
                        number:2,
                        id:2,
                        limit:3,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品3',
                        price:23,
                        number:12,
                        id:3,
                        limit:15,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                    {
                        name:'商品4',
                        price:72,
                        number:10,
                        id:4,
                        limit:13,
                        pic:'https://www.omekanko.gr.jp/wph8gq9w/wp-content/uploads/2019/03/P7303834.jpg'
                    },
                ],
                checkGroup:[],
                isAllChecked:false,
            },
            methods:{
                // 计算总金额
                sum(){
                    var total=0
                    this.checkGroup.forEach(item => {
                        total+=item.price*item.number
                    });
                    return total
                },
                // 删除
                handleDelete(index,deleteId){
                    // 删除checkGroup数组的对应的元素
                    this.checkGroup=this.checkGroup.filter(item=>item.id!=deleteId)
                    // 删除原数组
                    this.list.splice(index,1)
                    // 判断全选是否勾上
                    this.checked()
                },
                // 判定是否全选
                checked(){
                    if(this.checkGroup.length===this.list.length){
                        this.isAllChecked=true
                    }else{
                        this.isAllChecked=false
                    }
                }
            },
            watch:{
                // 监听状态改变
                isAllChecked(data){
                    if(this.isAllChecked){
                        this.checkGroup=this.list
                    }else{
                        if(this.checkGroup.length===this.list.length){
                            this.checkGroup=[]
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>
十友九
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 购物车案例（加全选，单选）
zyq51的博客
06-21 1198
vue 购物车案例（加全选，单选） <template> <div class="home"> //左右联动的左部分 <div class="left"> <div :id="selindex===index? 'sel':''" v-for="(item,index) in data" :key="index" @cli
vue购物车
wenxiukeke的博客
11-14 563
购物车 这里用vue做了一个购物车计算，功能：加减商品，商品总价根据数量发生变化；移除商品，商品总价等于剩余存在购物车的商品。 用到了Vue的computed的计算属性，v-for指令，v-on(@)指令，v-bind(:)指令，click事件，disabled表单属性。 代码 <!DOCTYPE html> <html lang="en"> <head> ...
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
主要介绍了Vue实现购物车的全选、单选、显示商品价格实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现购物车（多选、单选、全选）
m0_59224033的博客
09-05 4824
vue实现购物车功能，不依赖任何第三方组件、插件，复制粘贴开箱即用，简简单单，干净卫生，欢迎C+V
vue学习笔记（购物车小案例）
最新发布
cnzzs的博客
07-16 967
用一个简单的购物车demo来回顾一下其中需要注意的细节。先看一下最终效果功能：(1)全选按钮和下面的商品项的选中状态同步，当下面的商品全部选中时，全选勾选，反之，则不勾选。(2)控制购物车商品数量，最低为1(3)拥有小计和总计功能。其中，总计为勾选的商品所需要的总金额。首先，先把静态页面写出来。登录后复制 <tem...
Vue实现购物车(全选,单选,计算总价,计算单价,计算总数量)
weixin_60523038的博客
06-30 4640
vue实现购物车的所有功能
Vue入门三（表单控制｜购物车单选多选案例｜V-model进阶使用｜Vue生命周期｜与后端交互）
主要发布一些日常学习代码及理解
10-26 901
详细介绍了Vue入门三（表单控制｜购物车单选多选案例｜V-model进阶使用｜Vue生命周期｜与后端交互）
vue实现购物车页面功能交互，单选、全选、左滑删除
cd13849109771的博客
10-27 2451
vue实现购物车页面功能交互，单选、全选、左滑删除
vue实现淘宝购物车功能
10-15
在本文中，我们将探讨如何使用Vue.js框架来实现一个类似淘宝购物车的功能。Vue.js是一个轻量级的前端JavaScript库，它提供了声明式的数据绑定和组件化的能力，使得构建用户界面变得更加高效和简洁。 首先，我们要...
vue实现购物车结算功能
10-15
在Vue.js中定义的方法能够实现更复杂的逻辑处理，比如处理购物车结算功能中的商品数量修改、删除商品项以及全选操作等。方法可以响应用户的交互动作，并执行相应的数据处理逻辑。 ### 6. 条件渲染 条件渲染在Vue....
购物车全选功能购物车全选功能
05-19
在这里，我们将深入探讨购物车全选功能的实现原理，以及如何在Vue.js框架下进行开发。 首先，我们要理解购物车全选功能的核心逻辑。通常，购物车中的每个商品都有一个选中状态，可以是true或false，表示是否被用户...
Vue2.0实现购物车功能
08-30
Vue2.0实现购物车功能 Vue.js 是一个由尤雨溪开发的 MVVM 框架，具有响应式的数据绑定、组件化开发和 Virtual DOM 等特性。下面详细介绍 Vue2.0 实现购物车功能的知识点。 一、Vue.js 入门 Vue.js 是一个MVVM框架...
vue.js实战实现购物车的单选全选和二维数组分类--第五章购物车练习(二)
Clara_G的博客
05-05 1897
本例介绍《vue.js实战》第五章最后的购物车练习二, 练习2:将商品列表list改为一个二维数组来实现商品的分类,比如分为"电子产品","生活用品","果蔬",同类商品聚合在一起.提示,你可能用到两次v-for. 提醒:二维数组可以采用这种方式 [ { name:'电子产品', productList:[ { id:1, name:'...
Vue3+Vite+Vant3 购物车（单选全选，数量增减，金额计算，左滑删除，空状态，结算跳转）
weixin_62918410的博客
11-07 2314
无接口，本地缓存存储购物车数据——单选全选，数量增减，金额计算，左滑删除，空状态，结算跳转
Vue3-购物车列表-单选和全选功能实现
weixin_57334661的博客
05-11 506
/ 通过skuId找到要修改的那一项 然后把它的selected 修改为传过来的selected。1. 操作单选决定全选：只有当cartList中的所有项都为true时，全选状态才为true。2. 操作全选决定单选：cartList中的所有项的selected都要跟着一起变。// 把cartList 中每一项的selected都设置为当前的全选状态。// store 中 cartList 数组无法知道要修改谁的选中状态。// 除了 selected 补充一个用来筛选的参数 - skuId。
【精讲】vue框架 利用脚手架实现购物车（含添加、删除、存储、清空数据、全选or单选、tap栏切换）内含详细注释
m0_59505309的博客
08-09 1391
【精讲】vue框架 利用脚手架实现购物车（含添加、删除、存储、清空数据、全选or单选、tap栏切换）内含详细注释
Vue购物车全选、反选——单选全部选中、全选自动选中以及总价
A_gyb的博客
09-10 2907
1.模拟购物车数据 data() { return { //模拟购物车数据arr arr:[ { ischeck:false, //默认为false name:'篮球', price:98 }, { ischeck:false, //默认为false name:'足球', price:10
使用vue搭建一个可单选，全选，删除的购物车
lucky_ax的博客
12-06 1077
使用vue写一个PC的购物车，有全选，店铺选择，单选，添加数量，删除等 以下为我实现的代码 贴图没有CSS 购物车列表由接口获取 效果图 代码实现 <template> <div> <div class="main"> <div class="haed" style="text-align: left;"> <div class="hdp"> <input id="checkbox" t
【Vue-cli】组件化实现购物车，包括单选按钮全选按钮联动
qq_37086980的博客
01-25 920
代码实例 App.vue <template> <div id="app"> <index></index> </div> </template> <script> // 引入主页index import Index from './pages/Index'; export default { name: 'App', components: { Index } }; </s.
vue实现全选反选购物车
05-25
在 Vue 中，可以使用 `v-model` 指令绑定数据，通过 `v-for` 指令循环渲染出购物车列表中每个商品的复选框。可以用一个变量 `checkedAll` 来记录是否全选，当其中一个复选框被选中或取消选中时，都要检查是否所有的复选框都被选中，以确定是否需要将 `checkedAll` 设置为 `true` 或 `false`。当点击全选按钮时，则将所有复选框的状态设置为 `checkedAll`。 以下是一个简单的实现示例： ```html <template> <div> <div> <input type="checkbox" v-model="checkedAll" @change="checkAll"> <label>全选</label> </div> <div v-for="(item, index) in cartList" :key="index"> <input type="checkbox" v-model="item.checked" @change="checkOne"> <label>{{ item.name }}</label> </div> </div> </template> <script> export default { data() { return { cartList: [ { name: '商品1', checked: false }, { name: '商品2', checked: false }, { name: '商品3', checked: false } ], checkedAll: false } }, methods: { checkAll() { for (let i = 0; i < this.cartList.length; i++) { this.cartList[i].checked = this.checkedAll } }, checkOne() { let allChecked = true for (let i = 0; i < this.cartList.length; i++) { if (!this.cartList[i].checked) { allChecked = false break } } this.checkedAll = allChecked } } } </script> ``` 在上面的代码中，`cartList` 是一个包含商品信息的数组，每个商品都有一个 `checked` 属性记录是否被选中。在 `checkAll` 方法中，遍历 `cartList` 将每个商品的 `checked` 属性设置为 `checkedAll`。在 `checkOne` 方法中，检查是否所有的商品都被选中，然后将结果赋给 `checkedAll`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值