vue购物车的全选/全不选、单删、批删、搜索（纯静态页面）

引入vue文件，可以使用线上文件

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

设置挂载点，这里是购物车的html部分

<div id="app">
			<table>
				<tr>
					<td><input  type="checkbox" v-model="check" @change="all()"  ></td>
					<td>编号</td>
					
					<td>名称</td>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
					<td>操作</td>
				</tr>
				<tr v-for="(item,index)  in goods">
					<td><input  type="checkbox" v-model="list" :value="index"></td>
					<td>{{index+1}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price}}元</td>
					<td><input  type="button" value="-" @click="item.number>1?item.number--:1">{{item.number}}<input  type="button"value="+" @click="item.number++"></td>
					<td>{{item.number*item.price}}元</td>
					<td @click="del(index)">删除</td>
				</tr>
			</table>
			<input type="button" value="批量删除" @click="delall()">
			
		</div>

js部分

var vm=new  Vue({
		el:'#app',
		data:{
			goods:[{name:"苹果手机",price:12000,number:2},{name:"vivo",price:2000,number:3},{name:"oppo",price:3000,number:1},{name:"华为",price:5000,number:2}],
			check:false,
			list:[]
			
		},
		methods:{
			del:function(index){//删除方法
				if(confirm("确认要删除吗？")){//confirm 弹出一个带有确认和取消按钮的框，提示用户确认要删除吗？
						this.goods.splice(index,1);//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 参数 1  开始的下标  参数 2 操作的个数 参数 3 无删除元素
				}	
			},
			all:function(){//全选反选功能的实现
				if(this.check){//判断全选是否为真，为真则表示被选中
					var list=[];//里面每一项的内容
					 this.goods.map(function(item,index){//map遍历元素  item为每一项  index 下标
						 list.push(index);
					})
					this.list=list;	
				}else{
					this.list=[];
				}
			},
			delall:function(){
			 list=	this.list;//在询函中不能使用this所以变量重新声明一个
		      this.goods=this.goods.filter(function(item,index){//filter循环遍历数  返回结果将组成一个新的数组并返回  item是里面的项   index是下标
					if(list.indexOf(index)<0){//indexOf 检测数组中是否有指定元素的下标 如果有返回数据元素的下标     list为用户选择的内容    检测没有在数组中则返回的下标为小于0的则代表不删除该元素 返回该元素
						return item;//返回不在数组里面的元素	
					}
				})
				this.list=[];//删除之后清空数组元素
			}
		},
		watch:{//数据监听
			list:function(){//监听list的数据变化
				if(this.list.length==this.goods.length){//如果list的长度等于商品的总长度代表全部商品都选择了
					this.check=true;//全选则为真  选中状态
				}else{
					this.check=false;//否则则为假 为选中状态
				}
			}
		}
	})

核心的讲解

data中定义的数据，其中check的值为控制全选/反选按钮是否选中

使用双向绑定监听数据变化
如果用户选择勾选了，则表示选中全选

data数据中的list数数组形式的数据，存放是的数据前面的复选框

使用的也是双向绑定
书写change内容改变事件来触发事件

判断全选是否被选中，如果被选中，展示数据的下标将都存入list数组中，这样所有商品前面的复选框都将被选中。

watch为数据监听

监听商品的选中的复选框的长度，当长度不等于商品的项数时，全选按钮绑定的数据改为false，否则为真