vue.js实现checkbox

实现基础Checkbox

在Vue.js中可以通过v-model实现双向数据绑定来创建checkbox。基本模板如下：

<template>
  <div>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked ? 'Checked' : 'Unchecked' }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

处理多个Checkbox

当需要处理多个checkbox时，可以使用数组来存储选中的值：

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :id="option.value" 
        :value="option.value" 
        v-model="selectedOptions"
      >
      <label :for="option.value">{{ option.text }}</label>
    </div>
    <p>Selected: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', text: 'Apple' },
        { value: 'orange', text: 'Orange' },
        { value: 'banana', text: 'Banana' }
      ],
      selectedOptions: []
    }
  }
}
</script>

自定义Checkbox组件

创建可复用的Checkbox组件能提高代码的维护性：

<!-- Checkbox.vue -->
<template>
  <div class="checkbox-wrapper">
    <input 
      type="checkbox" 
      :id="id" 
      :checked="modelValue" 
      @change="$emit('update:modelValue', $event.target.checked)"
    >
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      default: ''
    },
    modelValue: {
      type: Boolean,
      default: false
    }
  }
}
</script>

使用自定义组件：

<template>
  <div>
    <Checkbox 
      id="terms" 
      label="I agree to terms" 
      v-model="agreed"
    />
  </div>
</template>

<script>
import Checkbox from './Checkbox.vue'

export default {
  components: {
    Checkbox
  },
  data() {
    return {
      agreed: false
    }
  }
}
</script>

样式美化

可以使用CSS来自定义checkbox的外观：

.checkbox-wrapper {
  position: relative;
  margin: 10px 0;
}

.checkbox-wrapper input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.checkbox-wrapper label {
  padding-left: 30px;
  position: relative;
  cursor: pointer;
}

.checkbox-wrapper label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
}

.checkbox-wrapper input[type="checkbox"]:checked + label:after {
  content: "✓";
  position: absolute;
  left: 5px;
  top: 2px;
  color: #42b983;
  font-weight: bold;
}

与Vuex集成

当应用使用Vuex进行状态管理时，可以通过计算属性和mutations来处理checkbox状态：

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

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    isChecked: {
      get() {
        return this.$store.state.someModule.checked
      },
      set(value) {
        this.$store.commit('someModule/setChecked', value)
      }
    }
  }
}
</script>