vue初学 完成购物车

引入VUE.JS

直接引用

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

也可以选择下载至本地
↓这里是地址
右键另存为、或者进入拷贝至js文件中

完整的VUE对象

let app = new Vue({
			el: '#app',
			data: {
				allCheck:true,
				goodsList: [{
						check:true,
						name: "刘海鸿1号",
						price: 200,
						num: 1,
						image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg"
					},
					{
						check:true,
						name: "刘海鸿2号",
						price: 100,
						num: 1,
						image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg"
					},
					{
						check:true,
						name: "刘海鸿3号",
						price: 400.22,
						num: 1,
						image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg"
					},
					{
						check:true,
						name: "刘海鸿4号",
						price: 12,
						num: 1,
						image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg"
					},
					{
						check:true,
						name: "刘海鸿4号",
						price: 55,
						num: 1,
						image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg"
					}
				]
			},
			methods: {
				AllSelect:function(){
					this.allCheck=!this.allCheck;
					for(let i=0;i<this.goodsList.length;i++){
						this.goodsList[i].check=this.allCheck;
					}
				},
				goodCheckeBox:function(i){
					this.goodsList[i].check=!this.goodsList[i].check;
					this.checkeAllSelect();
				},
				checkeAllSelect:function(){
					let All=true;
					for (let i = 0; i < this.goodsList.length; i++) {
						if(this.goodsList[i].check){
							continue;
						}
						All=false;
					}
					this.allCheck=All;
				},
				bigImage:function(e){
					let img = e.currentTarget;
					img.style.width=70+'px';
				},
				smallImage:function(e){
					let img = e.currentTarget;
					img.style.width=50+'px';
				},
				add: function(i, n) {
					if (this.goodsList[i].num + n > 0) {
						this.goodsList[i].num += n;
					}
				},
				remove: function(i) {
					this.goodsList.splice(i, 1);
				},
				toDecimal2:function (x) {
				        let f = Math.round(x*100)/100;  
				        let s = f.toString();  
				        let rs = s.indexOf('.');  
				        if (rs < 0) {  
				            rs = s.length;  
				            s += '.';  
				        }  
				        while (s.length <= rs + 2) {  
				            s += '0';  
				        }  
				        return s;  
				    }  

			},
			computed: {
				allPrice: function() {
					let result = 0;
					for (let i = 0; i < this.goodsList.length; i++) {
						if(this.goodsList[i].check)
						result += this.goodsList[i].price * this.goodsList[i].num;
					}
					return result;
				}
			}
		})

完整的HTML代码

<div id="app">
			<template v-if="goodsList.length!=0">
				<table border="0" cellspacing="6" cellpadding="2">
					<tr>
						<th>
							<label>全选</label>
							<input name="Checkbox" type="checkbox" :checked=allCheck @click="AllSelect()">
						</th>
						<th>图片</th>
						<th>商品名</th>
						<th>价格</th>
						<th>数量</th>
						<th>操作</th>
					</tr>
					<template v-for="(item,index) in goodsList">
							<tr>
								<td>
									<input name="Checkbox" type="checkbox" :checked=item.check @change="goodCheckeBox(index)">
								</td>
								<td><img :src="item.image" width="50px" @mouseenter="bigImage($event)" @mouseout="smallImage($event)"></td>
								<td>{{item.name}}</td>
								<td>${{toDecimal2(item.price)}}</td>
								<td>{{item.num}}</td>
								<td>
									<button type="button" @click="add(index,1)">+</button>
									<button type="button" @click="add(index,-1)">-</button>
									<button type="button" @click="remove(index)">移除</button>
								</td>
							</tr>
					</template>
				</table>
			</template>
			<template v-else>
				购物车为空
			</template>
			<div>
				<h1 style="color: red;">总价格${{allPrice}}</h1>
			</div>
		</div>

最终效果图

功能详细

复选框

vue数据部分（简化版本）

//判断全选选项是否选中
allCheck: true,
goodsList: [{
		//判断单个选项是否选中
		check: true,
		name: "刘海鸿1号",
		price: 200,
		num: 1,
		image: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2442805491,865665720&fm=26&gp=0.jpg"
	}]

全选

html代码部分
:checked绑定数据中的allCheck数据，绑定@click="AllSelect()"点击事件来达到点击修改全部复选框的能力

<input name="Checkbox" type="checkbox" :checked=allCheck @click="AllSelect()">

js代码部分
点击后触发，修改全选数据，在修改其余多选框数据

AllSelect: function() {
	this.allCheck = !this.allCheck;
	for (let i = 0; i < this.goodsList.length; i++) {
		this.goodsList[i].check = this.allCheck;
	}
}

单个商品选则

html代码部分
:checked绑定数据中对象的check数据，绑定@change="goodCheckeBox(index)"改变事件发送index来达到点击修改全部复选框的能力

<input name="Checkbox" type="checkbox" :checked=item.check @change="goodCheckeBox(index)">

js代码部分
点击后触发，修改单个选项数据，再判断是否全选

goodCheckeBox: function(i) {
	//修改该对象的选中属性
	this.goodsList[i].check = !this.goodsList[i].check;
	this.checkeAllSelect();
},
checkeAllSelect: function() {
	//是否全选
	let All = true;
	for (let i = 0; i < this.goodsList.length; i++) {
		if (this.goodsList[i].check) {
			continue;
		}
		//发现未选择
		All = false;
	}
	//更新全选状态
	this.allCheck = All;
}

鼠标悬浮图片放大

自行领悟