element ui checkbox v-model绑定数组
时间: 2023-06-30 11:15:52 浏览: 90
要使用Element UI的Checkbox组件绑定一个数组,你可以将Checkbox的value属性设置为数组中的一个元素。然后,将Checkbox的v-model绑定到一个数组上。在这种情况下,当Checkbox被选中时,其value属性对应的元素会被添加到数组中; 当Checkbox被取消选中时,其value属性对应的元素会从数组中移除。
下面是一个示例代码:
```html
<template>
<div>
<el-checkbox v-model="checkedFruits" label="apple">Apple</el-checkbox>
<el-checkbox v-model="checkedFruits" label="banana">Banana</el-checkbox>
<el-checkbox v-model="checkedFruits" label="orange">Orange</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checkedFruits: []
};
}
};
</script>
```
在这个例子中,我们创建了一个数组`checkedFruits`来存储被选中的水果。我们将每个Checkbox的value属性设置为对应的水果名称,并将其v-model绑定到`checkedFruits`数组上。当一个Checkbox被选中时,其对应的水果名称会被添加到`checkedFruits`数组中。如果一个Checkbox被取消选中,其对应的水果名称会从`checkedFruits`数组中移除。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)