在 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() 中预先设置默认值：
// 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，配合合理的数据初始化，即可稳定实现默认“开启”效果。
立即学习“前端免费学习笔记（深入）”；
