vue 实现复选

Vue 实现复选

在 Vue 中实现复选功能通常可以通过以下方法完成，包括使用原生 HTML 的 checkbox 或 Vue 的 v-model 指令绑定数组。

使用原生 HTML checkbox

<template>
  <div>
    <input type="checkbox" id="option1" v-model="checkedOptions" value="Option1">
    <label for="option1">Option 1</label>
    <input type="checkbox" id="option2" v-model="checkedOptions" value="Option2">
    <label for="option2">Option 2</label>
    <input type="checkbox" id="option3" v-model="checkedOptions" value="Option3">
    <label for="option3">Option 3</label>
    <p>Checked options: {{ checkedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedOptions: []
    }
  }
}
</script>

使用 Vue 的 v-model 绑定数组

Vue 的 v-model 可以绑定到一个数组，自动收集选中的值。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' }
      ],
      selectedOptions: []
    }
  }
}
</script>

动态生成复选框

如果需要动态生成复选框，可以结合 v-for 循环选项。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ item.name }}
    </div>
    <p>Selected items: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  }
}
</script>

自定义复选框组件

如果需要复用复选框逻辑，可以封装一个自定义复选框组件。

<template>
  <div>
    <custom-checkbox v-model="selectedValues" :options="checkboxOptions" />
    <p>Selected values: {{ selectedValues }}</p>
  </div>
</template>

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

export default {
  components: { CustomCheckbox },
  data() {
    return {
      checkboxOptions: [
        { value: 'val1', label: 'Value 1' },
        { value: 'val2', label: 'Value 2' },
        { value: 'val3', label: 'Value 3' }
      ],
      selectedValues: []
    }
  }
}
</script>

自定义复选框组件实现

CustomCheckbox.vue 的实现如下：

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

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      required: true
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

通过以上方法，可以在 Vue 中灵活实现复选功能，无论是简单的静态复选框还是动态生成的复杂逻辑。