欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue实现购物车的全选、单选、显示商品价格代码实例

程序员文章站 2024-02-09 19:24:46
今天中午废了一会时间,总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法: 购物车的基本页面如下: 先说实现的总体思...

今天中午废了一会时间,总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法:

购物车的基本页面如下:

Vue实现购物车的全选、单选、显示商品价格代码实例

先说实现的总体思路

  1. 1.给table表中表头th加一个 checkbox,设这两个事件:@click=”checkall” v-model=”checkall”;
  2. 2.给对应的tr加一个 checkbox 绑定一个事件 v-model=”checked”,checked设为数组,专门放商品id;
  3. 3.由于checkall默认为false,当我勾选全选框时,将checkall设为true,往checked数组中遍历添加所有商品id,每列中的checkbox自动选中,此时已经实现全选的取消\选中了,当单选时,应该将checkall的状态设为false,这样就能实现单选多选了;
  4. 4.最后一步就是对数据的动态显示了,data中绑定两个值,分别是price和count,当我勾选某一列时,通过@click=”xx(price,count,productid)”传值放到页面上;
  5. 5.单选的选中与取消可以通过判断商品id是否存在在数组中,即indexof(productid)==-1,如果数组中是存在此商品id,则点击单选框时应减少价格,反之增加。

这是我个人的思路,具体代码实现如下:

html:

<div id="a" class="container">
        <table class="table table-hover" v-if="list.length">
          <thead>
            <tr>
              <th><input type="checkbox" id="box" @click="checkall" v-model="checkall" /></th>
              <th>图片</th>
              <th>商品名</th>
              <th>数量</th>
              <th>单价</th>
              <th>总金额</th>
              <th>加入时间</th>
              <th>删除</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(dateil,index) in list" :key="index">
              <td><input type="checkbox" class="checkbox" v-model="checked"  @click="select(dateil.detailid,dateil.detailproductprice,dateil.detailproductnum)" :value="dateil.detailid" /></td>
              <td><a @click="goshop(dateil.detailproductid)" style="cursor: pointer;"><img v-bind:src="web_server_static+dateil.product.productphoto"></a></td>
              <td><a @click="goshop(dateil.detailproductid)" style="cursor: pointer;">{{dateil.product.productname}}</a></td>
              <td>{{dateil.detailproductnum}}</td>
              <td>{{dateil.detailproductprice}}</td>
              <td>{{dateil.detailproductprice*dateil.detailproductnum}}</td>
              <td>{{dateil.detaildatetime}}</td>
              <td>
                <button type="button" id="but" @click="del(dateil.detailid)" class="btn btn-danger">删除</button>
              </td>
            </tr>

          </tbody>

        </table>
        <div v-else style="font-size: 25px;text-align: center; margin-top: 300px;height: 100px;">购物车空空如也,请先去购买商品~</div>
        <div id="label_btn">
          <span><label>已选商品<a>{{count}}</a>件,共</a>¥{{price}}</a>元 数组{{checked}}</label>

          </span>
          <span><button type="button" id="btn-close" @click="jiesuan()" class="btn btn-danger">结算</button></span>
        </div>
        <!--结算按钮-->

      </div>

vue中的数据应该这样写

var vue = new vue({
        el: '#a',
        data: {
          list: [],
          checkall: false,
           checked: [],
           price:0,
           count:0,
        }

js:

checkall: function() {
            /**
            *控制全选反选
            */
            var _this = this
            //true的时候是全选,false是不选
            if(this.checkall) {
              // 实现反选,按钮选中时 实现了反选,列表为空
              this.checked = []
              this.price=0;
              this.count=0;
            } else {
              // 实现全选
                this.price=0;
              this.count=0;
              this.checked = []
              this.list.foreach(function(dateil) {
                _this.price+=parseint(dateil.detailproductprice);
                _this.count+=parseint(dateil.detailproductnum);
                _this.checked.push(dateil.detailid)
              })
            }
            if(this.checked.length === this.list.length) {
              this.checkall = true
              // console.log(this.checkall)
              // console.log(this.checked)
            }
          }
        /**
           * 当单选框选中时
           */
          checkall: function() {

            var _this = this
            //true的时候是全选,false是不选
            if(this.checkall) {
              // 实现反选,按钮选中时 实现了反选,列表为空
              this.checked = []
              this.price=0;
              this.count=0;
            } else {
              // 实现全选
                this.price=0;
              this.count=0;
              this.checked = []
              this.list.foreach(function(dateil) {
                _this.price+=parseint(dateil.detailproductprice);
                _this.count+=parseint(dateil.detailproductnum);
                _this.checked.push(dateil.detailid)
              })
            }
            if(this.checked.length === this.list.length) {
              this.checkall = true
              // console.log(this.checkall)
              // console.log(this.checked)
            }
          }

这样一个购物车的全选、单选、与数据的显示就完成了。

以上所述是小编给大家介绍的vue实现购物车的全选、单选、显示商品价格详解整合,希望对大家有所帮助