uniapp内置的checkbox组件怎么用
时间: 2024-05-01 10:23:11 浏览: 64
uni-app内置的checkbox组件是用来实现多选功能的,以下是使用步骤:
1. 在页面中引入checkbox组件
```html
<template>
<view>
<checkbox-group>
<checkbox value="item1" />Item 1
<checkbox value="item2" />Item 2
<checkbox value="item3" />Item 3
</checkbox-group>
</view>
</template>
```
2. 在checkbox-group组件中添加多个checkbox子组件,并分别设置它们的value属性值,这个value值将会在选中该checkbox时返回给父组件。
3. 可以设置checkbox组件的checked属性来指定是否默认选中该项。
```html
<checkbox value="item1" checked />Item 1
```
4. 可以通过bindchange事件监听checkbox选中状态的改变,当checkbox的选中状态改变时会触发该事件,并将选中状态的值返回给父组件。
```html
<template>
<view>
<checkbox-group bindchange="onChange">
<checkbox value="item1" checked />Item 1
<checkbox value="item2" />Item 2
<checkbox value="item3" />Item 3
</checkbox-group>
</view>
</template>
<script>
export default {
methods: {
onChange(e) {
console.log(e.detail.value); // 输出选中的值
}
}
}
</script>
```
阅读全文