vue开发购物车，解决全选单选及加减问题

最新推荐文章于 2024-07-16 16:33:57 发布

QQ帝国

最新推荐文章于 2024-07-16 16:33:57 发布

阅读量1.4k

点赞数

分类专栏： # Vue2.6+

本文链接：https://blog.csdn.net/QQ_Empire/article/details/82351782

版权

Vue2.6+ 专栏收录该内容

174 篇文章 8 订阅

订阅专栏

实现全选单选，在vue中无法通过this获取input中的checkbox的checked属性，但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定，同样也可以通过这种方式实现购物车全选，单选的效果。

大体内容如下：

主要是通过checkbox以及v-if v-else实现内容的隐藏与显示

当全选对应的checkbox为选中状态，在这里指的是：

<th>全选<input type="checkbox" @click="handleChecked()" v-model="allChecked"/></th>

注解：

(1)allChecked：被封装成一个boolean类型的值，当选中时被设置成true，反之为对立面。

(2)handleChecked()：是一个函数，用来处理触发事件，同时实现对应的效果，如改变子的checkbox的状态。

(3)一个比较巧妙的转换boolean数据对立面的方法：this.allChecked = !this.allChecked；

(4)购物车总价显示与否的实现方法：通过v-if与v-else来判断，前提也是有一个boolean类型的值作为逻辑控制的标志；

本方法的使用环境如下：

1、html代码

          <li v-for="(item,i) in arr">
                        <!-- v-model="checked" -->
                    <!-- <el-checkbox class="zuo1" ></el-checkbox> -->
                    <input type="checkbox" class="ipt" v-model = "item.checked">
                    <div class="zuo"><img src="static/222.jpg" alt="a"></div>
                    <div class="you"> 
                        <div>
                            <div class="name">{{item.name}}</div>
                            <p>配送费：￥3</p>
                            <div class="jia">
                                    <i class="el-icon-remove" @click="jian(i)"></i>
                                     <span class="num">{{item.num}}</span>
                                    <i class="el-icon-circle-plus" @click="jia(i)"></i>
                            </div>
                        </div>
                        <div>
                            <p>{{item.price}}</p>
                            <i class="el-icon-delete shan" @click="delate(i)"></i>
                        </div>
                    </div>
                
                </li>

全选按钮

        <div id="jiesuan">
                <input type="checkbox"  v-model = "allChecked" @click="handleChecked()">
                <div class="money">合计：<span>￥000000</span></div>
                <div class="btn">结算</div>
              
            </div>

2、js代码

<script>
          import $ from 'jquery'

      export default {
        name: 'Gouwuche',
        data () {
          return {
            allChecked:false,//全选按钮
            checked: true,
            num:0,
            arr:[
                {id:1,checked:false,name:"是个风格的不",price:120,num:0},
                {id:2,checked:false,name:"问题如同",price:190,num:0},
                {id:3,checked:false,name:"只需发个",price:150,num:0}
            ],
            val:"",
            checkval:[]
          }
        },
        methods:{
            //删除
            delate(i){
                $(".shan").eq(i).parents("li").remove()
                    
            },
           //加
            jia(i){
               
                this.arr[i].num++
                
               
            },
          //减
            jian(i){
                
                if (this.arr[i].num<1){
                    this.arr[i].num=0
                }else{
                    this.arr[i].num--
                }
                
            },

          //全选，取消反选
            handleChecked(item){
                  //全选
				if(this.allChecked==false) {
					for(var i = 0; i < this.arr.length; i++) {
						var item = this.arr[i];
						item.checked = true;
					}
				} else {  //取消全选
					for(var i = 0; i < this.arr.length; i++) {
                        var item = this.arr[i];
						item.checked = false;
					}
				}
				this.allChecked = !this.allChecked;


            }

        },
        mounted() {
            // $("#list>li").on("click",function(){
            //     var index = $(this).index()
            //     console.log(index)
            // })
        },
      }
      </script>