1.购物车效果图

Vue购物车案例（全选，反选，加入，删除，加减，总价，数量）

2.代码展示

<!DOCTYPE htML>
<html>

	<head>
		<;meta charset&#61;"UTF-8">
		<tITle></title>
	</head>
	<style type="text/css">
		body{
			font-Size: 16px;
		}
		table {
			width: 1200px;
		}
		ul li{
			list-style: none;
		}
		table th {
			width: 100px;
		}
		
		table td {
			width: 200px;
			text-align: center;
		}
		
		.m {
			width: 20px;
		}
		.shang{
			width: 30%;
			float: left;
			text-align: center;
		}
	</style>

	<body>
		<div id="app">
			<div id="div">
				<h1>商品</h1>
				<div class="shang"  v-for="item in list">
				<ul>
					<li>{{item.name}}</li>
					<li><img v-bind:src="item.imgsrc" width="80px" height="80px" /></li>
					<li>{{item.dan}}</li>
					<li><button @click="addg(item)" v-bind:disabled="item.amit==1">加入购物车</button></li>
				</ul>
             </div>
			</div>

			<!-------------------->
			<table>
				<tr>
					<th>全选:<input type="checkbox" :checked='isCheckedAll' @click='chang'></th>
					<th>序列号</th>
					<th>商品</th>
					<th>图片</th>
					<th>数量</th>
					<th>单价(元)</th>
					<th>金额(元)</th>
					<th>操作</th>
				</tr>

				<tr v-for="(item,index) in shopping">
					<th><input type="checkbox" v-model="item.checked" /></th>
					<th>{{index+1}}</th>
					<th>{{item.name}}</th>
					<th><img v-bind:src="item.imgsrc" width="80px" height="80px" /></th>
					<th>

						<button @click='jian(item)'>-</button>
						<span></span>{{item.age}}
						<button @click='jia(item)'>+</button>

						<th>{{item.dan }}</th>
						<th>{{(item.age*item.dan).toFixed(2) }}</th>
						<th @click="del(index)">删除</th>
				</tr>
				<!--<h2>总价:{{getSum()}}</h2>-->
				<tr>
					<th>总价F1a;<span v-text="getSum"></span></th>
					<th>计件：{{jSut()}}</th>
				</tr>
			</table>

		</div>
	</body>
	<script src="../js/vue.js">
	</script>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {

				list: [],
				shopping: []
			},
			mounted() {
				//fetch跟ajax一样，配合promise函数
				fetch('tupian.json')
					//把传过来的数据转为json对象
					.then(respose => respose.json())
					.then(reust => {
						//reust.data  是json里面data,存到数组里面去
						this.list = reust.data
					})
			},
			methods: {
				addg(list) {
					let p = this.shopping.find(value => value.id == list.id)
					list.amit--
						console.LOG(p)
					if(p) {
						p.age++ //点击的时候总数量件-1
					} else {
						let {
							name,
							imgsrc,
							checked,
							dan,
							id
						} = list;
						this.shopping.push({
							checked,
							id,
							dan,
							name,
							imgsrc,
							age: 1 // 点击加入购物车产品数量为1

						})
					}
				},
				//减
				jia(index) {
					index.age++
				},
				jian(index) {
					if(index.age != 0) {
						index.age--
					}
				},
				//全选
				chang() {
					VAR flag = !this.isCheckedAll
					this.shopping.foreach(item => item.checked = flag)
				},
				//选中删除
				del(index) {
					if(this.shopping[index].checked == true) {
						this.shopping.splice(index, 1)
					}
				},

				//计件
				jSut() {
					var sut = 0
					for(var i in this.shopping) {
						var item = this.shopping[i]
						if(item.checked == true) {
							sut += this.shopping[i].age
						}
					}
					return sut
				}
			},

			computed: {
				//总价
				getSum() {
					var sum = 0
					this.shopping.forEach(item => {

						if(item.checked == true) {
							sum += item.age * item.dan
						}
					})
					return sum.toFixed(2);
				},
				//全选
				isCheckedAll() {
					return this.shopping.every(item => item.checked)
				}
			},
			
		})
	</script>

</html>