vue开发购物车，解决全选单选问题

实现全选单选，在vue中无法通过this获取input中的checkbox的checked属性，但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定，同样也可以通过这种方式实现购物车全选，单选的效果。

大体内容如下：

主要是通过checkbox以及v-if v-else实现内容的隐藏与显示

当全选对应的checkbox为选中状态，在这里指的是：

全选allChecked"/>

注解：

(1)allChecked：被封装成一个boolean类型的值，当选中时被设置成true，反之为对立面。

(2)handleChecked()：是一个函数，用来处理触发事件，同时实现对应的效果，如改变子的checkbox的状态。

(3)一个比较巧妙的转换boolean数据对立面的方法：this.allChecked = !this.allChecked；

(4)购物车总价显示与否的实现方法：通过v-if与v-else来判断，前提也是有一个boolean类型的值作为逻辑控制的标志；

本方法的使用环境如下：

1、data的封装

data() {
			return {
				//全选
				allChecked:false,
				//总计一栏是否显示的标记
				displayMoney: false,
				//  	购物清单
				list: [{
					    checked:false,
						id: 1,
						name: '发动机',
						price: 180,
						count: 1,
						Stotal: 180
					},
					{
						checked:false,
						id: 2,
						name: '燃油机',
						price: 200,
						count: 1,
						Stotal: 200
					},
					{
						checked:false,
						id: 3,
						name: '滤清',
						price: 500,
						count: 1,
						Stotal: 500
					}
				]
			}

		},

2、html部分

			

				

					

						
全选
						
商品编号
						
商品名称
						
商品单价
						
购买数量
						
小计
						
操作
					
				
				

					

						

						
{{ index + 1}}
						
{{ item.name }}
						
￥{{ item.price }}
						

							-
							
							+
						
						
￥{{ item.Stotal }}
						

							
						
					
					

						

						

							总价 ：￥
							{{totalPrice}}
							0
						
					
				
			
		
		

			购物车为空
		

3、核心方法部分

handleChecked: function(item) {
				//全选
				if(this.allChecked==false) {
					for(var i = 0; i < this.list.length; i++) {
						var item = this.list[i];
						item.checked = true;
					}
				} else {  //取消全选
					for(var i = 0; i < this.list.length; i++) {
                        var item = this.list[i];
						item.checked = false;
					}
				}
				this.allChecked = !this.allChecked;
			}

完整代码见：https://download.csdn.net/download/colourfultiger/10516616