在 vue 中，直接使用 `checked` 属性或 `:checked` 绑定无法控制表单控件的初始选中状态；必须通过响应式数据 + `v-model` 实现双向绑定，才能让复选框默认“勾选”。

Vue 的 是受控组件（controlled component），其选中状态完全由 Vue 数据驱动，而非原生 DOM 属性。因此，以下写法无效：

<!-- ❌ 错误：:checked 是只读属性绑定，不触发初始状态设置 -->
<input type="checkbox" :checked="element.isChecked" />

<!-- ❌ 错误：原生 checked 属性在 Vue 模板中会被 v-model 或绑定覆盖 -->
<input type="checkbox" checked />
<input type="checkbox" checked="checked" />

✅ 正确做法是：确保 element.isChecked 在组件初始化时即为 true（响应式），并改用 v-model 进行双向绑定：

<div class="calc-toggle-wrapper">
  <input 
    type="checkbox" 
    v-model="element.isChecked" 
    :value="element.value" 
    @change="change($event, element.label)" 
  />
  <label></label>
</div>

同时，在 data() 或 setup() 中预先设置默认值：

vercel-react-best-practices

来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性

下载

// Options API 示例
export default {
  data() {
    return {
      elements: [
        { label: 'Option A', value: 'a', isChecked: true },  // ✅ 默认为 true
        { label: 'Option B', value: 'b', isChecked: true },
        { label: 'Option C', value: 'c', isChecked: true }
      ]
    }
  }
}

⚠️ 注意事项：v-model 会自动处理 change 事件和 checked 状态同步，无需额外 @change（除非需额外逻辑）；若 element.isChecked 来自 props 或异步数据，请确保它在渲染前已初始化（例如在 created/onMounted 中赋值）；使用 Composition API 时，应通过 ref() 或 reactive() 声明响应式字段，并确保其初始值为 true。

总结：Vue 中表单元素的默认状态取决于响应式数据的初始值，而非 HTML 属性。始终优先使用 v-model 绑定 checkbox，配合合理的数据初始化，即可稳定实现默认“开启”效果。

立即学习“前端免费学习笔记（深入）”；