为何checked属性无法让切换按钮默认处于选中状态？

你遇到的问题核心在于：Vue的:checked响应式绑定会覆盖原生checked属性。你手动添加的checked、checked="checked"这些原生属性，在Vue的数据驱动机制下会被忽略，复选框的状态完全由element.isChecked的值决定。

解决步骤： #

• 直接初始化element.isChecked为true
  如果是单个元素，在数据定义阶段就把对应字段设为true：

  // 组件data示例
  data() {
    return {
      element: {
        isChecked: true, // 设为true实现默认选中
        value: 'xxx',
        label: 'xxx'
      }
    }
  }
  

• 如果是批量生成的切换按钮列表
  遍历列表时给每个元素的isChecked设为true：

  // 示例：初始化元素列表
  this.elements = yourElementList.map(item => ({
    ...item,
    isChecked: true // 批量设置默认选中
  }))
  

补充说明： #

Vue的:checked是单向绑定，它会实时根据绑定的布尔值更新复选框状态。原生checked属性只在页面首次渲染且没有Vue绑定的时候生效，一旦用了:checked，就完全由Vue的数据来控制状态了。

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