Welcome to kimi's blog

购物车案列

购物车案列

--vue-day04

1. 选中checkbox,就赋值给标签

先定义一个空数组(checkGroup:[],),再绑定

  <td><input type="checkbox" v-model="checkGroup" :value="item" ></td>

image

2. 定义一个标签显示选中的价格总和

通过插值语法调用函数计算总和

 <p>总价格:{{getPrice()}}</p>
                       
<script>
    var vm = new Vue({
        el:'.shop',
        data:{ },
        methods:{
            getPrice(){
            // 通过checkGroup里面的对象,计算出总价格
                var total=0
                for(i of this.checkGroup){
                    total += i.number * i.price
                }
                return total
            }
        }
    })
</script>

image

3. 全选和全不选-----逻辑

给全选/全不选设置一个双向数据绑定绑定,优先设置默认值为0,然后给标签绑定一个点击change事件,如果全选就checkGroup等于原来的商品列表,否就置为空

 <th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"> </th>
//单选
<td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleClickOne" ></td>
methods:{
            getPrice(){ },
            // 全选的逻辑
            handleCheckAll(){
                    if (this.checkAll){
                this.checkGroup = this.skirt_list // 全选
            }else {
                     this.checkGroup=[] //全不选
            }} } ,
		      

			handleClickOne(){
                 console.log(this.checkAll)
                // 单个商品被选了
               if(this.checkGroup.length==this.skirt_list.length){
                    this.checkAll=true // 当单选等于全选时,就选中全选
                }else{
                    this.checkAll=false
                }
            }

4. 商品可以增加或减少的逻辑

1.设置可以增减的按钮,增减可以通过++或--实现,但是会一直减值到负数,通过点击事件来控制当商品数量减到1就不能再减少
<td>
                                <button class="left" @click="handleDown(item)">-</button>
                                {{item.number}}
                                <button class="right" @click="item.number++">+</button>
                            </td>


            handleDown(item){
                if(item.number>1){
                    item.number--
                }else{
                    alert('商品数量为1,不能再减了')
                }
            },


image

5. 商品删除

当商品减少小于1,开始删除商品信息并更新临时checkGroup以及价格的变化。也可以选中直接删除整个商品信息(给删除按钮绑定了点击事件)

// 删除的逻辑
         clickDelBtn(item){
            // Skirt_list删除商品
             this.Skirt_list.splice(this.Skirt_list.indexOf(item),1)
              // 临时checkGroup数组的变化
             if(this.checkGroup.indexOf(item)>0){
                 this.checkGroup.splice(this.checkGroup.indexOf(item),1)
             }
                 },

代码展示

购物车动态展示
image

点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>

<body>

<div class="shop">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">{{username}}购物车</h1>
                <div>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                            <th>delete</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--                        <tr v-for="(item,key) in Skirt_list" :key="key">-->
                        <tr v-for="(item) in Skirt_list">
                            <th scope="row">{{item.id}}</th>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>
                                <button  @click="handleDown(item)">-</button>
                                {{item.number}}
                                <button  @click="handleU(item)" >+</button>
                            </td>
                            <td><input type="checkbox" v-model="checkGroup" :value="item" @change="handleClickOne"></td>
                            <td><button value="" class="btn btn-danger"  @click="clickDelBtn(item)" >删除</button></td>

                        </tr>
                        </tbody>
                    </table>

                    <p>shopping_show: {{checkGroup}}</p>
                    <p>总价格:{{getPrice}}</p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

</body>

<script>
    var vm = new Vue({
        el:'.shop',
        data: {
            username: 'kiki',
            Skirt_list: [
                {id: 1, name: '连衣裙', price: 299, number: 2,stock:4},
                {id: 2, name: '法式长裙', price: 399, number: 4,stock:6},
                {id: 3, name: '泡泡袖裙', price: 269, number: 1,stock:1},
                {id: 4, name: '公主裙', price: 400, number: 3,stock:4},
                {id: 5, name: '唐制诃子裙', price: 699, number: 2,stock:3},
                {id: 6, name: '小鹿斑比', price: 899, number: 1,stock:5},
                {id: 7, name: '玉露酥山', price: 656, number: 2,stock:2},
            ],
            checkGroup: [],
            checkAll: false,//全选或全不选
        },
        methods: {
            // 计算库存数
            handleU(item){
                //选中商品数量小于库存数
               if(item.number<item.stock){
                   item.number++
               }else{
                   alert('库存数只有:'+ item.stock)
               }
            },
            // 全选的逻辑
            handleCheckAll() {
                if (this.checkAll) {
                    this.checkGroup = this.Skirt_list
                } else {
                    this.checkGroup = []
                }
            },
            handleClickOne() {
                // 单个商品被选了
                if (this.checkGroup.length === this.Skirt_list.length) {
                    this.checkAll = true

                } else {
                    this.checkAll = false
                }
            },
            handleDown(item){
                if(item.number>1){
                    item.number--
                }else{
                    // 当商品减少为0开始删除商品信息
                    alert('确定要删除商品')
                    // Skirt_list删除商品
                    this.Skirt_list.splice(this.Skirt_list.indexOf(item),1)
                    // 临时checkGroup数组的变化
                    if(this.checkGroup.indexOf(item)>0){
                        this.checkGroup.splice(this.checkGroup.indexOf(item),1)
                    }
                }
            },

            // 删除的逻辑
            clickDelBtn(item){
               // Skirt_list删除商品
                this.Skirt_list.splice(this.Skirt_list.indexOf(item),1)
                 // 临时checkGroup数组的变化
                if(this.checkGroup.indexOf(item)>0){
                    this.checkGroup.splice(this.checkGroup.indexOf(item),1)
                }
                    },


            },
        //计算属性
            computed:{
                 getPrice() {
                // 通过checkGroup里面的对象,计算出总价格
                var total = 0
                for (i of this.checkGroup) {
                    total += i.number * i.price
                }
                return total
            },
            },
    })
</script>
</html>

posted @   魔女宅急便  阅读(13)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 我与微信审核的“相爱相杀”看个人小程序副业
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
Title
点击右上角即可分享
微信分享提示

目录导航