uniapp中全选和反选

checkbox插件下载地址

这个插件就可以使用Vue中的双向绑定了很方便啊

HTML

<view class="">
		<view class="check"  v-for="item in list" :key="item.id">
			<evan-checkbox v-model="item.isChecked"></evan-checkbox>{{item.name}}
		</view>
		
		<view class="all">
			<evan-checkbox v-model="isAllChecked"></evan-checkbox>全选
		</view>
	</view>

JavaScript

<script>
	export default{
		data(){
			return{
				list:[]
			}
		},
		computed:{
			// 全选
			isAllChecked:{
				// list列表--->全选
				get(){
					// 列表中是否都选中了
					return this.list.every(el=>el.isChecked==true)
				},
				// 全选---->list列表
				set(val){
					console.log(val);
					this.list.forEach(el=>el.isChecked=val)
				}
			}
		},
		onShow() {
			var list=[
				{
					name:'吃饭',
					id:0
				},
				{
					name:'睡觉',
					id:1
				}
			]
			// 数组中每一项添加双向绑定的属性
			list.forEach(el=>el.isChecked=false)
			this.list=list
		}
	}
</script>