uniapp的多选框
时间: 2023-08-20 16:06:53 浏览: 52
UniApp中的多选框可以通过使用`<checkbox-group>`和`<checkbox>`组件来实现。以下是一个简单的示例:
```html
<template>
<view>
<checkbox-group v-model="selectedFruits">
<label v-for="fruit in fruits" :key="fruit">
<checkbox :value="fruit" />
{{ fruit }}
</label>
</checkbox-group>
<button @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
fruits: ['苹果', '香蕉', '橙子', '西瓜'],
selectedFruits: []
};
},
methods: {
submit() {
console.log(this.selectedFruits);
// 在这里可以处理选中的水果数据
}
}
};
</script>
```
在上述示例中,`<checkbox-group>`组件用于包裹多个`<checkbox>`组件,通过`v-model`绑定选中的值。使用`v-for`指令遍历`fruits`数组生成多个复选框选项。当用户选择复选框时,`selectedFruits`数组会自动更新。
点击提交按钮后,可以在`submit`方法中处理选中的水果数据。
请注意,以上示例仅为演示多选框的基本使用方法,具体根据实际需求进行扩展。