可以通过以下方式获取
复选框选中的
值：
1. 使用 `v-model` 绑定
选中状态
```html
<div id="app">
<input type="
checkbox" id="apple" value="apple" v-model="checkedFruits">
<label for="apple">Apple</label>
<br>
<input type="
checkbox" id="banana" value="banana" v-model="checkedFruits">
<label for="banana">Banana</label>
<br>
<input type="
checkbox" id="orange" value="orange" v-model="checkedFruits">
<label for="orange">Orange</label>
<br>
<button @click="showCheckedFruits">Show Selected Fruits</button>
</div>
<script>
new
Vue({
el: "#app",
data: {
checkedFruits: []
},
methods: {
showCheckedFruits() {
console.log(this.checkedFruits);
}
}
});
</script>
```
在上面的例子中，我们使用 `v-model` 绑定了 `checkedFruits` 数组，当
复选框选中时，
Vue会自动更新数组中的
值。然后，我们可以使用 `showCheckedFruits` 方法来获取
选中的水果。
2. 使用 `@change` 事件监听
选中状态变化
```html
<div id="app">
<input type="
checkbox" id="apple" value="apple" @change="updateCheckedFruits($event)">
<label for="apple">Apple</label>
<br>
<input type="
checkbox" id="banana" value="banana" @change="updateCheckedFruits($event)">
<label for="banana">Banana</label>
<br>
<input type="
checkbox" id="orange" value="orange" @change="updateCheckedFruits($event)">
<label for="orange">Orange</label>
<br>
<button @click="showCheckedFruits">Show Selected Fruits</button>
</div>
<script>
new
Vue({
el: "#app",
data: {
checkedFruits: []
},
methods: {
updateCheckedFruits(event) {
const isChecked = event.target.checked;
const value = event.target.value;
if (isChecked) {
this.checkedFruits.push(value);
} else {
const index = this.checkedFruits.indexOf(value);
this.checkedFruits.splice(index, 1);
}
},
showCheckedFruits() {
console.log(this.checkedFruits);
}
}
});
</script>
```
在上面的例子中，我们使用 `@change` 事件来监听
复选框选中状态的变化。当
复选框选中时，我们将其
值添加到 `checkedFruits` 数组中；当
复选框取消
选中时，我们从数组中删除其
值。然后，我们可以使用 `showCheckedFruits` 方法来获取
选中的水果。
1354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
