vue购物车效果

一、介绍

vue购物车效果实现了全选、加减和总价等效果

 二、过程

首先写一个表格，第一行写序号、名称等、后面通过v-for遍历data里面的list渲染页面，最后写总价，每一个商品后面跟的单独的总价是当前商品的单价乘以当前商品的数量：

<table id="app" border="1" cellspacing="0" cellpadding="0" width="600" height="500">
			<tr align="center">
				<th><input type="checkbox" v-model="check" @change="checkedchange" /></th>
				<th>序号</th>
				<th>名称</th>
				<th>个数</th>
				<th>单价</th>
				<th>库存</th>
				<th>总价</th>
			</tr>
			<tr v-for="item in list">
				<td><input type="checkbox" v-model="listxin" :value="item" @change="hun"/></td>
				<th>{{item.id}}</th>
				<th>{{item.name}}</th>
				<th><button @click="jian(item)">-</button>{{item.quantity}}<button @click="jia(item)">+</button></th>
				<th>{{item.price}}</th>
				<th>{{item.amount-item.quantity}}</th>
				<th>{{item.quantity*item.price}}</th>
			</tr>
			<tr>
				<th colspan="7">总价：{{zongj()}}</th>
			</tr>
		</table>

data

data: {
				listxin: [],
				shu: 1,
				check: false,
				list: [{
					"id": "001",
					"name": "iPhone12",
					"price": 8900,
					"amount": 5,
					"quantity": 1,
					"total": 8900,
					"check": false
				}, {
					"id": "002",
					"name": "iPhone11",
					"price": 6000,
					"amount": 8,
					"quantity": 1,
					"total": 6000,
					"check": false
				}, {
					"id": "003",
					"name": "iPhoneMax10",
					"price": 3000,
					"amount": 10,
					"quantity": 1,
					"total": 3000,
					"check": false
				}, {
					"id": "004",
					"name": "iPhoneMin9",
					"price": 2000,
					"amount": 12,
					"quantity": 1,
					"total": 2000,
					"check": false
				}]
			},

全选改变时触发checkedchange事件判断当前check的值，全选通过v-model绑定check，如果是true把list赋值给listxin，反之listxin的值为空，从第二行的每一行的CheckBox都通过v-model绑定listxin，如果listxin为空是false，反之是true。

checkedchange() {
					if(this.check){
						this.listxin=this.list
					}else{
						this.listxin=[]
					}
				}

单选改变时触发hun事件，判断listxin的长度与list的长度是否相等。如果相等，代表所有的单选都已经选中，所以check为true。如果不相等，代表单选没有全部选中，所以check为false：

hun(){
					if(this.listxin.length===this.list.length){
						this.check=true
					}else{
						this.check=false
					}
				}

加减是点击之后分别触发jia和jian事件，把当前商品作为实参接收。如果是加的或需要判断当前数量减去库存是否小于0，如果大于等于0,则数量等于当前商品的总库存。如果是减的话，需要判断数量是否大于0，如果不是数量等于1.

jian(item){
					item.quantity--
					if(item.quantity<=0){
						item.quantity=1
					}
				},
				jia(item){
					item.quantity++
					if(item.quantity-item.amount>=0){
						item.quantity=item.amount
					}
				},

所有商品的总价是加上listxin里面的商品的总价得来的，因为只有选中的商品的价格才会相加。创建一个值为0的变量，然后遍历listxin，最后每个商品的数量乘以单价相加返回最后的值，就得到了总价：

zongj(){
    var sun=0;
    for(var i=0;i<this.listxin.length;i++){
        sun+=this.listxin[i].quantity*this.listxin[i].price
    }
    return sun
}

总结：

到这里购物车就介绍完了，祝大家生活愉快