From ee5dcf88260000d788c9fdc8f3633ef2df923236 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E6=99=A8?= <1650944868@qq.com>
Date: Wed, 23 Jun 2021 21:34:34 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20210621/new_file.css"                    |  33 ++++
 .../20210621/new_file.html"                   | 146 ++++++++++++++++++
 2 files changed, 179 insertions(+)
 create mode 100644 "\346\235\250\345\233\275\346\231\250/20210621/new_file.css"
 create mode 100644 "\346\235\250\345\233\275\346\231\250/20210621/new_file.html"
diff --git "a/\346\235\250\345\233\275\346\231\250/20210621/new_file.css" "b/\346\235\250\345\233\275\346\231\250/20210621/new_file.css"
new file mode 100644
index 00000000..dd242429
--- /dev/null
+++ "b/\346\235\250\345\233\275\346\231\250/20210621/new_file.css"
@@ -0,0 +1,33 @@
+.block{
+    width: 800px;
+    height: auto;/*高度自适应*/
+    min-height: 30px;/*最小高度指的是没有数据前title那一行的数据*/
+    border: 1px silver solid;
+    margin: auto;/*居中显示*/
+}
+.title{
+    display: flex;/*设置伸缩盒*/
+    flex-direction: row;/*让里面的元素在一行显示*/
+}
+.title>div{
+    flex: 1px;/*分配空间*/
+    height: 30px;/*设置高度是想垂直显示用*/
+    border: 1px solid silver;
+    text-align: center;/*居中显示*/
+    line-height: 30px;/*垂直显示*/
+}
+
+.h_list{
+    display: flex;/*设置伸缩盒*/
+    flex-direction: row;/*让里面的元素在一行显示*/
+}
+.h_list>div{/*分配空间 居中*/
+    flex: 1;
+    text-align: center;
+    line-height: 80px;
+    border: 1px solid silver;
+}
+.txt {/*num里label的宽*/
+    width: 30px;
+    display: inline-block;
+}
diff --git "a/\346\235\250\345\233\275\346\231\250/20210621/new_file.html" "b/\346\235\250\345\233\275\346\231\250/20210621/new_file.html"
new file mode 100644
index 00000000..393ad5a8
--- /dev/null
+++ "b/\346\235\250\345\233\275\346\231\250/20210621/new_file.html"
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>购物车</title>
+		<link href="new_file.css" rel="stylesheet">
+		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+	</head>
+	<body>
+		<div class="block">
+			<!--设置大盒子-->
+			<div class="title">
+				<!--设置大盒子里的title-->
+				<div><input type="checkbox" id="allck" v-model="checkAll" @click="selectAll">全选/反选</div>
+				<div>名称</div>
+				<div>单价</div>
+				<div>数量</div>
+				<div>小计</div>
+				<div>操作</div>
+			</div>
+			<div class="h_list" v-for="(item,index) in list">
+				<div><input type="checkbox" id="ckcolor" :value="item.id" v-model="checkItem" @change="selectOne" />
+				</div>
+				<div>{{item.name}}</div>
+				<div>{{item.price}}</div>
+				<div>
+					<button class="txt" v-on:click="leftButton(index)">-</button>{{item.num}}<button class="txt"
+						v-on:click="rightButton(index)">+</button>
+				</div>
+				<div>{{item.price*item.num}}</div>
+				<div><button v-on:click="deleteTable">删除</button></div>
+			</div>
+			<div>
+				<p class="text-right">
+					金额总计:{{sum}}
+				</p>
+				<p class="text-right">
+					商品数量:{{count}}
+			</div>
+
+		</div>
+
+
+		<script>
+			let app = new Vue({
+				el: ".block",
+				data: {
+					checkItem: [],
+					checkAll: false,
+					list: [{
+							id: 1,
+							name: "男装1",
+							price: 1000,
+							num: 0
+						},
+						{
+							id: 2,
+							name: "男装2",
+							price: 2000,
+							num: 0
+						},
+						{
+							id: 3,
+							name: "男装3",
+							price: 3000,
+							num: 0
+						},
+						{
+							id: 4,
+							name: "男装4",
+							price: 4000,
+							num: 0
+						},
+						{
+							id: 5,
+							name: "男装5",
+							price: 5000,
+							num: 0
+						},
+
+					]
+				},
+				methods: {
+					deleteTable: function(index) {
+						app.list.splice(index, 1)
+					},
+					leftButton: function(index) {
+						this.list[index].num--;
+						if (this.list[index].num < 0) {
+							this.list[index].num = 0;
+							confirm("数量不能小于1哦");
+						}
+					},
+					rightButton: function(index) {
+						this.list[index].num++;
+					},
+					selectAll: function() {
+						this.checkItem = [];
+						if (!this.checkAll) {
+							for (var i = 0; i < this.list.length; i++) {
+								this.checkItem.push(this.list[i].id);
+							}
+						} else {
+							this.checkItem = [];
+							this.checkAll = false;
+						}
+					},
+					selectOne() {
+						if (this.checkItem.length == this.list.length) {
+							this.checkAll = true;
+						} else {
+							this.checkAll = false;
+						}
+					}
+
+				},
+				computed: {
+					sum: function() {
+
+						let total = 0;
+						for (let i = 0; i < this.list.length; i++) {
+							if (this.checkItem.indexOf(this.list[i].id) != -1) {
+								total += parseFloat(this.list[i].price) * parseFloat(this.list[i].num)
+							}
+						}
+						return total
+
+					},
+					count: function() {
+						
+							let total = 0
+							for (let i = 0; i < this.list.length; i++) {
+								if (this.checkItem.indexOf(this.list[i].id) != -1) {
+								total += parseInt(this.list[i].num)
+							}
+							}
+							return total
+						
+					}
+				}
+
+
+			});
+		</script>
+	</body>
+</html>
-- 
Gitee


From c2a2cf608b1b5b3c1165f60453810ac5719d0789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD?= <杨国>
Date: Thu, 24 Jun 2021 11:44:58 +0800
Subject: [PATCH 2/3] 11

---
 .../20210621/1.html"                          | 34 ++++----
 .../20210621/new_file.html"                   | 81 ++++++++++++++-----
 2 files changed, 76 insertions(+), 39 deletions(-)

diff --git "a/\346\235\250\345\233\275\346\231\250/20210621/1.html" "b/\346\235\250\345\233\275\346\231\250/20210621/1.html"
index 0a17dad6..125a8549 100644
--- "a/\346\235\250\345\233\275\346\231\250/20210621/1.html"
+++ "b/\346\235\250\345\233\275\346\231\250/20210621/1.html"
@@ -26,13 +26,8 @@
 				}
 			},
 			props:['price'],
-			template:`<div><input type="text" v-bind:value="price" v-on:input="$emit('input', $event.target.value)"  /><button @click="add()">提交</button></div>`,
-			methods:{
-				add:function(){
-					// console.log(app.price) 	
-					app.list.push({name:app.price});
-				}
-			}
+			template:`<div><input type="text" v-bind:value="price" v-on:input="$emit('input', $event.target.value)"  /><button @click="$parent.add()">提交</button></div>`,
+		
 			
 		});
 		 Vue.component('co-ul',{
@@ -42,13 +37,9 @@
 		 		}
 		 	},
 		 	props:['list','index'],
-		 	template:'<div><li>{{list.name}}<button @click="btnDelete(index)">删除</button></li></div>',
+		 	template:'<div><li>{{list.name}}<button @click="$parent.btnDelete(index)">删除</button></li></div>',
+			
 			
-			methods:{
-				btnDelete:function(index){
-					app.list.splice(index,1);
-				}
-			}
 		 	
 		 });
 		 let app = new Vue({
@@ -60,12 +51,17 @@
 				  	{id:2,name:"吃饭"},
 				  ],
 		      },
-			  // methods:{
-			  // 			  add:function(){
-			  // 			 console.log(this.price);
-					// 		 this.list.push({name:this.price})
-			  // 			  }
-			  // }
+			  methods:{
+			  			  add:function(){
+			  			 console.log(this.price);
+							 this.list.push({name:this.price})
+			  			  },
+						  
+						  	btnDelete:function(index){
+						  		this.list.splice(index,1);
+						  	}
+
+			  }
 			 
 		     
 		  });
diff --git "a/\346\235\250\345\233\275\346\231\250/20210621/new_file.html" "b/\346\235\250\345\233\275\346\231\250/20210621/new_file.html"
index 393ad5a8..ebf37316 100644
--- "a/\346\235\250\345\233\275\346\231\250/20210621/new_file.html"
+++ "b/\346\235\250\345\233\275\346\231\250/20210621/new_file.html"
@@ -8,28 +8,19 @@
 	</head>
 	<body>
 		<div class="block">
+			<co-form v-bind:checkAll="checkAll" v-bind:list="list"></co-form>
+			<co-list v-for="(item,index) in list" v-bind:check-item="checkItem" v-bind:index="index" v-bind:list="item"></co-list>
 			<!--设置大盒子-->
-			<div class="title">
+			<!-- <div class="title"> -->
 				<!--设置大盒子里的title-->
-				<div><input type="checkbox" id="allck" v-model="checkAll" @click="selectAll">全选/反选</div>
+				<!-- <div><input type="checkbox" id="allck" v-model="checkAll" @click="selectAll">全选/反选</div>
 				<div>名称</div>
 				<div>单价</div>
 				<div>数量</div>
 				<div>小计</div>
-				<div>操作</div>
-			</div>
-			<div class="h_list" v-for="(item,index) in list">
-				<div><input type="checkbox" id="ckcolor" :value="item.id" v-model="checkItem" @change="selectOne" />
-				</div>
-				<div>{{item.name}}</div>
-				<div>{{item.price}}</div>
-				<div>
-					<button class="txt" v-on:click="leftButton(index)">-</button>{{item.num}}<button class="txt"
-						v-on:click="rightButton(index)">+</button>
-				</div>
-				<div>{{item.price*item.num}}</div>
-				<div><button v-on:click="deleteTable">删除</button></div>
-			</div>
+				<div>操作</div> -->
+			<!-- </div> -->
+			
 			<div>
 				<p class="text-right">
 					金额总计:{{sum}}
@@ -42,6 +33,43 @@
 
 
 		<script>
+			Vue.component('co-form',{
+				data:function(){
+					return {
+						
+					}
+				},
+				props:['checkAll','list'],
+				template:`<div class="title">
+				<!--设置大盒子里的title-->
+				<div><input type="checkbox" id="allck"  v-bind:value="checkAll"  @click="$parent.selectAll(list.id)">全选</div>
+				<div>名称</div>
+				<div>单价</div>
+				<div>数量</div>
+				<div>小计</div>
+				<div>操作</div>
+			</div>`
+			});
+			Vue.component('co-list',{
+				data:function(){
+					return {
+						
+					}
+				},
+				props:['list','index','checkItem'],
+				template:`<div class="h_list">
+				<div><input type="checkbox" id="ckcolor" :value="list.id" v-bind:checked="checkItem.indexOf(list.id) !== -1" @change="$parent.selectOne(list.id)" />
+				</div>
+				<div>{{list.name}}</div>
+				<div>{{list.price}}</div>
+				<div>
+					<button class="txt" v-on:click="$parent.leftButton(index)">-</button>{{list.num}}<button class="txt"
+						v-on:click="$parent.rightButton(index)">+</button>
+				</div>
+				<div>{{list.price*list.num}}</div>
+				<div><button v-on:click="$parent.deleteTable(index)">删除</button></div>
+			</div>`
+			});
 			let app = new Vue({
 				el: ".block",
 				data: {
@@ -82,7 +110,7 @@
 				},
 				methods: {
 					deleteTable: function(index) {
-						app.list.splice(index, 1)
+						this.list.splice(index, 1)
 					},
 					leftButton: function(index) {
 						this.list[index].num--;
@@ -92,10 +120,15 @@
 						}
 					},
 					rightButton: function(index) {
+						
 						this.list[index].num++;
 					},
-					selectAll: function() {
+					selectAll: function(id) {
 						this.checkItem = [];
+						let index= this.checkItem.indexOf(id);
+						if (index === -1) {
+							this.checkItem.push(id);
+						}
 						if (!this.checkAll) {
 							for (var i = 0; i < this.list.length; i++) {
 								this.checkItem.push(this.list[i].id);
@@ -105,7 +138,14 @@
 							this.checkAll = false;
 						}
 					},
-					selectOne() {
+					selectOne(id) {
+						let index= this.checkItem.indexOf(id);
+						if (index === -1) {
+							this.checkItem.push(id);
+						}else {
+							this.checkItem.splice(index, 1);
+						}
+						
 						if (this.checkItem.length == this.list.length) {
 							this.checkAll = true;
 						} else {
@@ -116,7 +156,7 @@
 				},
 				computed: {
 					sum: function() {
-
+					
 						let total = 0;
 						for (let i = 0; i < this.list.length; i++) {
 							if (this.checkItem.indexOf(this.list[i].id) != -1) {
@@ -130,6 +170,7 @@
 						
 							let total = 0
 							for (let i = 0; i < this.list.length; i++) {
+								
 								if (this.checkItem.indexOf(this.list[i].id) != -1) {
 								total += parseInt(this.list[i].num)
 							}
-- 
Gitee


From 3a8b35b1cbf09d10b98cb485916681c9446c050e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E6=99=A8?= <1650944868@qq.com>
Date: Thu, 24 Jun 2021 21:58:32 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20210621/2.css"                           |   0
 .../20210621/2.html"                          | 123 +++++++++---------
 2 files changed, 59 insertions(+), 64 deletions(-)
 rename "\346\235\250\345\233\275\346\231\250/20210621/new_file.css" => "\346\235\250\345\233\275\346\231\250/20210621/2.css" (100%)
 rename "\346\235\250\345\233\275\346\231\250/20210621/new_file.html" => "\346\235\250\345\233\275\346\231\250/20210621/2.html" (65%)

diff --git "a/\346\235\250\345\233\275\346\231\250/20210621/new_file.css" "b/\346\235\250\345\233\275\346\231\250/20210621/2.css"
similarity index 100%
rename from "\346\235\250\345\233\275\346\231\250/20210621/new_file.css"
rename to "\346\235\250\345\233\275\346\231\250/20210621/2.css"
diff --git "a/\346\235\250\345\233\275\346\231\250/20210621/new_file.html" "b/\346\235\250\345\233\275\346\231\250/20210621/2.html"
similarity index 65%
rename from "\346\235\250\345\233\275\346\231\250/20210621/new_file.html"
rename to "\346\235\250\345\233\275\346\231\250/20210621/2.html"
index ebf37316..634a114d 100644
--- "a/\346\235\250\345\233\275\346\231\250/20210621/new_file.html"
+++ "b/\346\235\250\345\233\275\346\231\250/20210621/2.html"
@@ -3,46 +3,32 @@
 	<head>
 		<meta charset="UTF-8">
 		<title>购物车</title>
-		<link href="new_file.css" rel="stylesheet">
+		<link href="2.css" rel="stylesheet">
 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 	</head>
 	<body>
 		<div class="block">
-			<co-form v-bind:checkAll="checkAll" v-bind:list="list"></co-form>
-			<co-list v-for="(item,index) in list" v-bind:check-item="checkItem" v-bind:index="index" v-bind:list="item"></co-list>
-			<!--设置大盒子-->
-			<!-- <div class="title"> -->
-				<!--设置大盒子里的title-->
-				<!-- <div><input type="checkbox" id="allck" v-model="checkAll" @click="selectAll">全选/反选</div>
-				<div>名称</div>
-				<div>单价</div>
-				<div>数量</div>
-				<div>小计</div>
-				<div>操作</div> -->
-			<!-- </div> -->
-			
-			<div>
-				<p class="text-right">
-					金额总计:{{sum}}
-				</p>
-				<p class="text-right">
-					商品数量:{{count}}
-			</div>
-
+			<co-form v-bind:checkAll="checkAll"></co-form>
+			<co-list 
+				v-for="(item,index) in list" 
+				v-bind:check-item="checkItem"
+				v-bind:index="index"
+				v-bind:list="item">
+			</co-list>
+			<co-right 
+				v-bind:sum="sum" 
+				v-bind:count="count">
+			</co-right>
 		</div>
-
-
 		<script>
-			Vue.component('co-form',{
-				data:function(){
-					return {
-						
-					}
+			Vue.component('co-form', {
+				data: function() {
+					return {}
 				},
-				props:['checkAll','list'],
-				template:`<div class="title">
+				props: ['checkAll'],
+				template: `<div class="title">
 				<!--设置大盒子里的title-->
-				<div><input type="checkbox" id="allck"  v-bind:value="checkAll"  @click="$parent.selectAll(list.id)">全选</div>
+				<div><input type="checkbox" id="allck"  v-bind:value="checkAll"  @click="$parent.selectAll()">全选</div>
 				<div>名称</div>
 				<div>单价</div>
 				<div>数量</div>
@@ -50,14 +36,12 @@
 				<div>操作</div>
 			</div>`
 			});
-			Vue.component('co-list',{
-				data:function(){
-					return {
-						
-					}
+			Vue.component('co-list', {
+				data: function() {
+					return {}
 				},
-				props:['list','index','checkItem'],
-				template:`<div class="h_list">
+				props: ['list', 'index', 'checkItem'],
+				template: `<div class="h_list">
 				<div><input type="checkbox" id="ckcolor" :value="list.id" v-bind:checked="checkItem.indexOf(list.id) !== -1" @change="$parent.selectOne(list.id)" />
 				</div>
 				<div>{{list.name}}</div>
@@ -70,6 +54,20 @@
 				<div><button v-on:click="$parent.deleteTable(index)">删除</button></div>
 			</div>`
 			});
+			Vue.component('co-right', {
+				data: function() {
+					return {}
+				},
+				props: ['sum', 'count'],
+				template: `<div>
+				<p class="text-right">
+					金额总计:{{sum}}
+				</p>
+				<p class="text-right">
+					商品数量:{{count}}
+				</p>
+				</div>`
+			});
 			let app = new Vue({
 				el: ".block",
 				data: {
@@ -120,43 +118,40 @@
 						}
 					},
 					rightButton: function(index) {
-						
+
 						this.list[index].num++;
 					},
-					selectAll: function(id) {
-						this.checkItem = [];
-						let index= this.checkItem.indexOf(id);
-						if (index === -1) {
-							this.checkItem.push(id);
-						}
+					selectAll: function() {
+
 						if (!this.checkAll) {
+
 							for (var i = 0; i < this.list.length; i++) {
 								this.checkItem.push(this.list[i].id);
+								this.checkAll = true;
 							}
 						} else {
 							this.checkItem = [];
 							this.checkAll = false;
+
 						}
 					},
-					selectOne(id) {
-						let index= this.checkItem.indexOf(id);
+					selectOne: function(id) {
+
+						let index = this.checkItem.indexOf(id);
 						if (index === -1) {
 							this.checkItem.push(id);
-						}else {
-							this.checkItem.splice(index, 1);
-						}
-						
-						if (this.checkItem.length == this.list.length) {
-							this.checkAll = true;
 						} else {
-							this.checkAll = false;
+							this.checkItem.splice(index, 1);
 						}
+
+
 					}
 
 				},
+
 				computed: {
 					sum: function() {
-					
+
 						let total = 0;
 						for (let i = 0; i < this.list.length; i++) {
 							if (this.checkItem.indexOf(this.list[i].id) != -1) {
@@ -167,16 +162,16 @@
 
 					},
 					count: function() {
-						
-							let total = 0
-							for (let i = 0; i < this.list.length; i++) {
-								
-								if (this.checkItem.indexOf(this.list[i].id) != -1) {
+
+						let total = 0
+						for (let i = 0; i < this.list.length; i++) {
+
+							if (this.checkItem.indexOf(this.list[i].id) != -1) {
 								total += parseInt(this.list[i].num)
 							}
-							}
-							return total
-						
+						}
+						return total
+
 					}
 				}
 
-- 
Gitee

