Vue实现购物车的全选、单选、显示商品价格代码实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue实现购物车的全选、单选、显示商品价格代码实例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3802字,纯文字阅读大概需要6分钟。
内容图文
今天中午废了一会时间,总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法:
购物车的基本页面如下:
先说实现的总体思路
- 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实现购物车的全选、单选、显示商品价格代码实例全部内容,希望文章能够帮你解决Vue实现购物车的全选、单选、显示商品价格代码实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。