错误方式（复选框与数组绑定）
<template>
<!-- 复选框？-->
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames.arr" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames.arr" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames.arr" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ checkedNames.arr}}</span>
</div>
</template>
<script setup>
import {reactive} from "vue";
const checkedNames = reactive([])
</script>
正确方式
<template>
<!-- 复选框？-->
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames.arr"/>
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames.arr"/>
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames.arr"/>
<label for="mike">Mike</label>
<br/>
<span>Checked names: {{ checkedNames.arr }}</span>
</div>
</template>
<script setup>
import {reactive} from "vue";
const checkedNames = reactive({
arr:[]
})
</script>
<style scoped>
</style>
