Vue+Vant制作单选全选全不选以及删除按钮van-checkbox

在官网上看到vant组件特别好用，就尝试使用checkbox制作单选全选，由于是下午头脑不清楚所以没想通思路，导致了一部分的错误，经过我的老大指点，才想通如此简单的思路，就是都亮和都不亮的区别。

全选全不选

1. 引入组件

import Vue from ‘vue’;
import { Checkbox, CheckboxGroup } from ‘vant’;
Vue.use(Checkbox).use(CheckboxGroup);

2. 基础用法

	通过v-model绑定 checkbox 的勾选状态
	<van-checkbox v-model="checked">复选框</van-checkbox>
	export default {
	 data() {
	 return {
  	checked: true
	  };
	  }
	};

3. 做出的效果：全选全亮；取消全选全部不亮；单选时全选不亮。

4. 基础代码如下：

删除功能

包括了调用接口的删除，在文中会注明的。

<template>
  <div>
    <div>我是关注店铺</div>
    <div class="lyy-bg">
      <div class="lyy-hei"></div>
      <div class="lyy-neia lyy-gs1" v-for="(items,index) in list" :key="index">
        <!-- @click="handleShopSelect1()" -->
        <!-- :value="items.id" -->
        <van-checkbox
          style="padding:0px 5px 0px 0px"
          v-show="isShow"
          v-model="items.checked"
          @change="choose"
          checked-color="#07c160"
        ></van-checkbox>
        <div class="lyy-nei">
          <div class="lyy-gs">
            <div class="lyy-gs1">
              <div class="lyy-tu">
                <img :src="items.shop_logo" width="68px" height="68px" />
              </div>
              <div class="lyy-jl">
                <div class="lyy-word">{
   {
   items.shop_name}}</div>
                <div class="lyy-word2">
                  <span>
                    <img src="@/img/xing.png" width="12px" height="11px" />
                  </span>
                  <span>{
   {
   items.num}}</span>人已关注
                </div>
              <