Vue中Checkbox默认值设置方法及多选框绑定可行性咨询

嘿，针对你问的两个Vue复选框相关问题，我来给你详细解答下～

一、如何在Vue中为Checkbox设置默认值 #

Vue的复选框绑定逻辑根据单个/多个的场景略有不同，分情况看：

单个复选框 #

单个复选框的v-model绑定的是一个布尔值，直接在data里给绑定的变量设置true就能默认勾选，false则默认不勾选：

<template>
  <input type="checkbox" v-model="agreeTerm"> 同意用户协议
</template>

<script>
export default {
  data() {
    return {
      agreeTerm: true // 默认勾选协议
    }
  }
}
</script>

多个复选框（绑定数组） #

如果是多个复选框绑定同一个数组（通常用于多选场景），默认勾选的项就是数组中包含对应复选框value值的项：

<template>
  <input type="checkbox" value="apple" v-model="selectedFruits"> 苹果
  <input type="checkbox" value="mango" v-model="selectedFruits"> 芒果
  <input type="checkbox" value="banana" v-model="selectedFruits"> 香蕉
</template>

<script>
export default {
  data() {
    return {
      selectedFruits: ['apple', 'mango'] // 默认勾选苹果和芒果
    }
  }
}
</script>

二、你提到的多复选框绑定数组索引的场景是否可行 #

完全可行！ 你的写法是Vue中合法且有效的数据绑定方式。

逻辑说明 #

你把每个复选框的v-model绑定到named数组的对应索引项，这样每个复选框的状态会实时同步到数组的对应位置：

• 苹果对应的复选框勾选时，named[0]会变成true，未勾选则为false
• 芒果对应的复选框勾选时，named[1]会变成true，未勾选则为false
• 以此类推第三个复选框

完整示例代码 #

给你补一个完整的可运行示例，方便你直观理解：

<template>
  <table>
    <tr>
      <td><input type="checkbox" v-model="named[0]"></td>
      <td>苹果</td>
      <td><input type="checkbox" v-model="named[1]"></td>
      <td>芒果</td>
      <td><input type="checkbox" v-model="named[2]"></td>
      <td>香蕉</td>
    </tr>
  </table>
  <p>当前各水果的勾选状态：{{ named }}</p>
</template>

<script>
export default {
  data() {
    return {
      named: [false, true, false] // 这里可以设置默认状态，比如默认勾选芒果
    }
  }
}
</script>

额外小建议 #

如果想要更好的语义化（比如后续维护时一眼能看出每个位置对应哪个水果），也可以把数组改成对象形式：

<template>
  <td><input type="checkbox" v-model="fruitStatus.apple"></td>
  <td><input type="checkbox" v-model="fruitStatus.mango"></td>
  <td><input type="checkbox" v-model="fruitStatus.banana"></td>
</template>

<script>
export default {
  data() {
    return {
      fruitStatus: {
        apple: false,
        mango: true,
        banana: false
      }
    }
  }
}
</script>

不过你的原始写法完全没问题，完全能满足需求～

内容的提问来源于stack exchange，提问作者user8411743