vue 实现购物车

购物车是电商必备的功能，可以展示出用户购买的多个商品以及价格信息。

最近在做一个电商的项目，使用了vue.框架，一个轻量级的mvvm，数据变化视图一起变化；为了响应式布局，使用了bootstrap。

该购物车的主要功能有，增加购买数量，价格实时变化，可以单选，全选，不选。

页面全选按钮，如果下方按钮均选中则默认选中，有一个没选中就不选

代码的实现函数和注意写在注释和下面的介绍

html

单个商品金额使用{{good.price*good.num}}

数量框中加减的数字使用{{good.num}} 并且使用三元运算符，保证在数量大于0时可以点+ @click="good.num>0?good.num--:0"，其他情况下-按钮不可以点

在实现时使用了两种该方法：

1.使用v-if指令来决定全选按钮的状态

 <div class="col-lg-1 col-md-1" v-if="isAllselect()==true" @click="selectNone()">
					<input type="checkbox" id="none" value="all" v-model="checkedNames" ref="checkBox_" >
                	<label for="all">全选</label>
				</div>
				<div class="col-lg-1 col-md-1" v-else @click="selectAll()">
					<input type="checkbox" id="none" value="all" v-model="checkedNames" ref="checkBox_"  >
                	<label for="all">全选</label>
				</div> 

2.methods函数中判断全选按钮状态

<div id="app">
		<div class="container">
			<div class="row">
				<div class="col-lg-1 col-md-1"  @change="checked">
					<!-- 用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定 -->
					<input type="checkbox" id="none" value="false" ref="checkBox_"  >
                	<label for="none">全选</label>
				</div>
				<div class="col-lg-1 col-md-1">序号</div>
				<div class="col-lg-3 col-md-3">图片</div>
				<div class="col-lg-3 col-md-3">价格</div>
				<div class="col-lg-2 col-md-2">数量</div>
				<div class="col-lg-2 col-md-2">金额</div>
			</div>
			<!-- v-for循环 -->
			<div class="row" v-for="(good,index) in data_">
				<div class="col-lg-1 col-md-1" @change="check_isAll">
				<input type="checkbox" v-model="good.checked">
			</div>
			<div class="col-lg-1 col-md-1">{{index+1}}</div>
			<div class="col-lg-3 col-md-3">
				<img :src="good.img" alt="">
			</div>
			<div class="col-lg-3 col-md-3">{{good.price}}</div>
			<div class="col-lg-2 col-md-2">
				<span @click="good.num<1?0:good.num--">-</span><span class="num" contenteditable="true">{{good.num}}</span><span @click="good.num++">+</span>
			</div>
			<!-- 计算出当前选项总金额 -->
			<div class="col-lg-2 col-md-2">{{good.price * good.num}}</div>
			</div>
			<div class="row">
				<div class="col-lg-6 col-md-6"></div>
				<!-- 使用calc()进行选择件数和进行总价的计算 -->
				<div class="col-lg-3 col-md-3">
					共选择了<span>{{calc().cnt}}</span>件商品
				</div>
				<div class="col-lg-3 col-md-3">
					总计<span>{{calc().totalPrice}}</span>
				</div>
			</div>
		</div>
	</div>

javascript

绑定事件

1.使用了v-on:的方式，也可以使用简写@事件名

2.input 单选框选中，不选中使用v-model绑定

<script>
		var goods= {
            data_: [{
                id: 1,
                name: '小吃1',
                img: 'img/0.jpg',
                price: '26.00',
                num: 0,
                checked: false
            }, {
                id: 2,
                name: '小吃2',
                img: 'img/1.jpg',
                price: '25.00',
                num: 0,
                checked: false
            }, {
                id: 3,
                name: '小吃3',
                img: 'img/2.jpg',
                price: '20.00',
                num: 0,
                checked: false
            }, {
                id: 4,
                name: '小吃4',
                img: 'img/3.jpg',
                price: '18.00',
                num: 0,
                checked: false
            }, {
                id: 5,
                name: '小吃5',
                img: 'img/4.jpg',
                price: '16.00',
                num: 1,
                checked: false
            }]
        };
        // 使用localstorage保存当前页面的选择，保证在下一次进入或者刷新页面选择按钮和选择数量不变
		var goodObj=localStorage.goods?JSON.parse(localStorage.goods):goods;
		var vm=new Vue({
			el:'#app',
			data:goodObj,
			mounted:function(){
			  this.check_isAll();
			},
			methods:{
			    update:function(){
			      localStorage.setItem('goods',JSON.stringify(this.$data));//更新函数，在每次有变化都需要调用并修改localstroage
				},
				// 判断是否页面所有单选按钮是不是被选中，如果均选中则全选按钮默认被选中
				check_isAll(){
					var check_el=document.getElementById('none');
					if(this.isAllselect()){ 
						check_el.checked=true;
					}else{
						check_el.checked=false;
					}
					this.update();
				},
				checked(){
					// 获取当前全选按钮状态，并给单选按钮赋相对应的值
					var el=event.target;
					var check_=el.checked;
					// debugger;
					for(var i = 0;i < this.data_.length;i++){
						this.data_[i].checked=check_;
					}
					this.update();
				}
				,
				// 使用数组every方法判断是否全选中单选按钮
				isAllselect:function(){
					return this.data_.every(function(item){
						// console.log(index);
						return item.checked==true;
					})
				},
				// 计算相关的总数量个总金额
				calc:function(){
					var pro=this.data_.filter(function(item){
						return item.checked==true;
					});
					var totalPrice=0;
					for(var i = 0; i < pro.length;i++){
						totalPrice+=pro[i].price*pro[i].num;
					}
					return {cnt:pro.length,totalPrice:totalPrice}
				}
			}
		})
	</script>

css

<style>
		.container{
			text-align: center;
		}
		.container .row{
			/*height: 100px;*/
			border: 1px solid #eee;
		}
		img{
			width: 100px;
			height: 100px;
			vertical-align: middle;
		}
		span{
			width: 20px;
			height: 20px;
			border: 1px solid #999;
			background:#eee;
			display:inline-block;
		}
		.num{
			background:transparent;
			border-left: none;
			border-right: none;
		}
	</style>

来源：CSDN

作者：chancejl

链接：https://blog.csdn.net/qq_39833794/article/details/81024216