VUE3 自学第八课 脚本编写常见错误 复选框出现选择的值为 [“on“] 的问题

从代码和显示效果来看，出现选择的值为 [“on”] 是因为 复选框没有设置 value 属性，Vue 会默认把选中状态的 value 设为 “on”。以下是修复方案：
修复代码（添加 value 属性）

```bash
<p>复选框</p>
<!-- 为每个复选框添加 value -->
<input type="checkbox" id="baidu" v-model="checkedNames" value="百度">
<label for="baidu">百度</label>

<input type="checkbox" id="doubao" v-model="checkedNames" value="豆包">
<label for="doubao">豆包</label>

<br>
<span>选择的值为：{{ checkedNames }}</span>

**关键说明
value 的作用：
复选框的 value 决定了选中时 v-model 绑定的数组（checkedNames）中存储的值。如果不设置 value，Vue 会默认存 "on"（浏览器默认行为）。
响应式数据定义：
确保 checkedNames 是响应式数组（Vue 3 中用 ref 定义）：**

```bash
// Vue 3 组合式 API
import { ref } from 'vue'
const checkedNames = ref([])

修复后效果：
选中 “百度” 和 “豆包” 时，checkedNames 会变成 [“百度”, “豆包”]，而非 [“on”]。
只需给复选框添加 value 属性，就能正确存储选中的文字啦～