vue获取多选框的选中的值

在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

Apple

Banana

Orange

```

当复选框的选中状态发生变化时，`printSelectedFruits`方法将被调用，并在控制台输出选中的水果。

以上是使用Vue获取多选框的选中值的基本步骤。使用`v-model`指令和`@change`事件监听器，我们可以轻松地捕获和处理复选框的选中值。