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

2019-11-19 11:38:24

字体：大中小

来源：转载

供稿：网友

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

购物车的基本页面如下：

先说实现的总体思路

1.给table表中表头th加一个 checkbox，设这两个事件：@click=”checkAll” v-model=”checkall”；
2.给对应的tr加一个 checkbox 绑定一个事件 v-model=”checked”，checked设为数组，专门放商品Id；
3.由于checkall默认为false,当我勾选全选框时，将checkall设为true，往checked数组中遍历添加所有商品ID，每列中的checkbox自动选中,此时已经实现全选的取消/选中了，当单选时，应该将checkAll的状态设为false，这样就能实现单选多选了；
4.最后一步就是对数据的动态显示了，data中绑定两个值，分别是price和count，当我勾选某一列时，通过@click=”xx(price,count,productId)”传值放到页面上；
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实现购物车的全选、单选、显示商品价格详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：vue项目打包后上传至GitHub并实现github-pages的预览

下一篇：JavaScript中关于base64的一些事