在Vue中，可以使用`v-model`指令来绑定复选框的选中值。复选框可以有一个单独的值，也可以绑定到一个数组中。以下是如何获取多选框的选中值的详细步骤：
1. 创建一个Vue实例：
```html
```
```javascript
new Vue({
el: '#app'
data: {
checkedFruits: []
}
});
```
在上面的代码中，我们创建了一个Vue实例，并在data属性中定义了一个名为`checkedFruits`的数组，用于存储选中的水果。
2. 使用`v-model`指令将复选框与`checkedFruits`数组进行绑定。当复选框的选中状态发生变化时，数组中的值也会相应地更新。
3. 在Vue实例中，可以通过访问`checkedFruits`数组来获取选中的值。例如，我们可以在Vue实例中添加一个方法来打印选中的水果：
```javascript
methods: {
printSelectedFruits() {
console.log(this.checkedFruits);
}
}
```
在Vue中，可以通过`v-on`指令来监听事件。我们可以将`printSelectedFruits`方法与复选框的更改事件绑定，以便在发生更改时调用该方法。
```html
```
当复选框的选中状态发生变化时，`printSelectedFruits`方法将被调用，并在控制台输出选中的水果。
以上是使用Vue获取多选框的选中值的基本步骤。使用`v-model`指令和`@change`事件监听器，我们可以轻松地捕获和处理复选框的选中值。
咨询微信客服
0516-6662 4183
立即获取方案或咨询
top
