vue2不用element加入复选框

### 不依赖 Element UI 实现 Vue 2 复选框组件

在 Vue 2 中创建自定义复选框组件可以通过原生 HTML `<input type="checkbox">` 元素并结合 Vue 的双向绑定特性 `v-model` 来完成。这种方式不仅能够提供基础的选择功能，还可以灵活定制样式和行为。

#### 基础单个复选框实现

对于简单的单个复选框而言，只需要利用 Vue 数据模型来跟踪其状态即可：

<template>
  <label>
    <input type="checkbox" v-model="isChecked">
    {{ label }}
  </label>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false,
      label: '同意条款'
    }
  },
}
</script>

此代码片段展示了如何使用 `v-model` 将输入控件的状态与 JavaScript 变量关联起来[^1]。

#### 使用数组管理多个复选框

当涉及到一组选项时，则可以采用一个字符串或数值类型的数组作为数据源，并让每个复选框对应于该集合中的某个成员：

<template>
  <div>
    <ul>
      <li v-for="(option, index) in options" :key="index">
        <label>
          <input 
            type="checkbox"
            :value="option.value"
            v-model="selectedOptions"
          >
          {{ option.text }}
        </label>
      </li>
    </ul>
    
    <!-- 显示已选择项 -->
    <p>您选择了:</p>
    <pre>{{ selectedOptions }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { text: "苹果", value: "apple" },
        { text: "香蕉", value: "banana" },
        { text: "橙子", value: "orange" }
      ],
      selectedOptions: []
    };
  }
};
</script>

上述例子中，每当用户勾选/取消勾选某一项时，`selectedOptions` 数组就会自动更新以反映当前被选中的条目列表。

#### 添加全选逻辑

为了增加用户体验，在某些场景下可能还需要加入“全选”按钮的功能。这可以通过监听所有单项的变化以及设置专门的方法来进行控制：

<template>
  <div>
    <button @click="selectAll">{{ allSelected ? '取消全选' : '全选' }}</button>
    
    <ul>
      <li v-for="(option, index) in options" :key="index">
        <label>
          <input 
            type="checkbox"
            :value="option.value"
            v-model="selectedOptions"
            @change="updateAllSelectStatus()"
          >
          {{ option.text }}
        </label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    updateAllSelectStatus(){
      this.allSelected = this.options.length === this.selectedOptions.length;
    },
    selectAll(){
      if (this.allSelected){
        this.selectedOptions = [];
      }else{
        this.selectedOptions = this.options.map(option => option.value);
      }
      this.updateAllSelectStatus();
    }
  },
  
  computed:{
    allSelected(){
      return this.options.every(option =>
        this.selectedOptions.includes(option.value));
    }
  },

  watch: {
    selectedOptions(newValue){
      this.updateAllSelectStatus();
    }
  }

  // ...data部分保持不变...
};
</script>

这段脚本实现了两个重要功能：一是允许一次性选定所有可用选项；二是动态调整“全选”按钮的文字描述以便更直观地指示操作意图[^3]。