uniapp多选框标签
时间: 2023-08-06 18:06:10 浏览: 130
在 Uniapp 中,你可以使用 `<checkbox-group>` 标签来创建多选框组件。下面是一个简单的示例:
```html
<template>
<view>
<checkbox-group v-model="selectedOptions">
<label class="checkbox" v-for="(option, index) in options" :key="index">
<checkbox :value="option.value"></checkbox>
<text>{{ option.label }}</text>
</label>
</checkbox-group>
</view>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
],
selectedOptions: [],
};
},
};
</script>
```
在上面的示例中,`options` 数组包含了多选框的选项,每个选项都有一个 `label` 和 `value` 属性。`selectedOptions` 是一个数组,用于存储用户选择的选项。通过 `v-model` 指令将 `selectedOptions` 和 `<checkbox-group>` 组件进行双向绑定,实现多选功能。
你可以根据需要修改选项的数量、文本内容和值,以及样式来满足你的实际需求。
阅读全文