:checked=“true“

在Vue中， :checked="true"  是通过  v-bind （缩写  : ）绑定表单元素的  checked  属性，使其默认处于选中状态。具体说明如下：

1. 作用：动态设置复选框/单选框的选中状态

<!-- 复选框示例 -->

<input type="checkbox" :checked="isSelected" />

<!-- 单选框示例 -->

<input type="radio" name="gender" :checked="userGender === 'male'" />

- 当  isSelected  为  true  时，复选框默认选中；为  false  时取消选中。

- 单选框通过表达式  userGender === 'male'  的布尔值判断是否选中。

2. 与不使用  v-bind  的区别

-  :checked="true" ：传递布尔值  true ，组件接收到真正的布尔类型，选中状态随数据动态更新。

-  checked="true" （不使用  v-bind ）：传递字符串  "true" ，浏览器会将其视为字符串字面量，非布尔值，此时复选框会被强制选中（因为任何非空字符串在HTML中都会被视为真值）。

<!-- 错误示例：不使用v-bind时，checked属性会被当作字符串处理 -->

<input type="checkbox" checked="false" /> <!-- 实际仍会选中，因为"false"是非空字符串 -->

<!-- 正确示例：使用v-bind传递布尔值 -->

<input type="checkbox" :checked="isChecked" /> <!-- isChecked为false时取消选中 -->

3. 响应式特性

当  :checked  绑定的变量（如  isSelected ）发生变化时，表单元素的选中状态会自动更新：

<template>

  <div>

    <input type="checkbox" :checked="isSelected" />

    <button @click="toggleSelection">切换选中状态</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      isSelected: false

    }

  },

  methods: {

    toggleSelection() {

      this.isSelected = !this.isSelected // 点击按钮时切换布尔值，复选框状态同步更新

    }

  }

}

</script>

总结

-  :checked="true"  是动态绑定布尔值，实现选中状态的响应式控制，是Vue中推荐的写法。

- 不使用  v-bind  时（如  checked="true" ），会将值作为字符串处理，可能导致逻辑错误，仅在静态场景下使用（如固定选中状态且无需动态更新）。