uni-app中使用checkbox-group
时间: 2024-06-14 14:07:53 浏览: 135
Checkbox的使用
在uni-app中,可以使用checkbox-group组件来实现多选功能。checkbox-group是一个容器组件,用于包裹一组checkbox组件,使它们可以进行联动操作。
使用checkbox-group的步骤如下:
1. 在页面的template中,使用checkbox-group标签来创建一个checkbox组的容器。
2. 在checkbox-group标签内部,使用checkbox标签来创建多个checkbox选项。
3. 给每个checkbox标签设置一个value属性,用于表示该选项的值。
4. 可以给checkbox标签设置一个checked属性,用于表示该选项是否默认选中。
5. 可以给checkbox-group标签设置一个@change事件监听函数,用于监听选项的变化。
以下是一个示例代码:
```
<template>
<view>
<checkbox-group @change="handleChange">
<checkbox value="apple" checked>苹果</checkbox>
<checkbox value="banana">香蕉</checkbox>
<checkbox value="orange">橙子</checkbox>
</checkbox-group>
</view>
</template>
<script>
export default {
methods: {
handleChange(event) {
console.log(event.detail.value); // 输出选中的值
}
}
}
</script>
```
在上面的示例中,我们创建了一个包含三个选项的checkbox组。其中,苹果选项默认被选中。当用户选择或取消选择某个选项时,会触发@change事件,并将选中的值通过event.detail.value传递给handleChange方法。
阅读全文