vue实现勾选框

Vue 实现勾选框的方法

在 Vue 中实现勾选框可以通过多种方式完成，以下是几种常见的方法：

使用 v-model 绑定数据

通过 v-model 可以直接绑定到 Vue 实例的数据属性上，适用于单个勾选框：

<template>
  <div>
    <input type="checkbox" v-model="isChecked" />
    <label>勾选状态: {{ isChecked }}</label>
  </div>
</template>

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

多个勾选框绑定到数组

如果需要处理多个勾选框，可以将 v-model 绑定到一个数组：

<template>
  <div>
    <input type="checkbox" v-model="selectedItems" value="item1" />
    <label>Item 1</label>
    <input type="checkbox" v-model="selectedItems" value="item2" />
    <label>Item 2</label>
    <input type="checkbox" v-model="selectedItems" value="item3" />
    <label>Item 3</label>
    <p>已选: {{ selectedItems }}</p>
  </div>
</template>

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

使用自定义组件

封装一个可复用的勾选框组件：

<template>
  <div>
    <input 
      type="checkbox" 
      :checked="checked" 
      @change="$emit('change', $event.target.checked)" 
    />
    <label>{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    checked: Boolean,
    label: String
  }
}
</script>

使用时通过父组件传递数据：

<template>
  <div>
    <custom-checkbox 
      v-model="isChecked" 
      label="自定义勾选框" 
    />
  </div>
</template>

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

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

动态生成勾选框列表

结合 v-for 动态生成勾选框：

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

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

处理勾选框事件

如果需要额外处理勾选框的变化事件：

<template>
  <div>
    <input 
      type="checkbox" 
      :checked="isChecked" 
      @change="handleChange" 
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleChange(event) {
      this.isChecked = event.target.checked
      console.log('勾选状态变化:', this.isChecked)
    }
  }
}
</script>

这些方法涵盖了 Vue 中实现勾选框的常见场景，可以根据具体需求选择适合的方式。