uniapp 复选框用法
时间: 2024-01-24 08:16:03 浏览: 89
uni-app 利用canvas进行画框,移动框,放大缩小并删除,目前支持小程序,h5,其他没测试过
uniapp中的复选框用法如下:
1. 在页面的vue文件中,使用`<checkbox-group>`标签包裹多个`<checkbox>`标签,创建一个复选框组。
2. 在`<checkbox>`标签中,使用`v-model`指令绑定一个变量,用于表示复选框的选中状态。
3. 可以使用`value`属性为每个复选框设置一个唯一的值。
4. 可以使用`@change`事件监听复选框的选中状态变化。
以下是一个示例代码:
```html
<template>
<view>
<checkbox-group v-model="selectedFruits">
<checkbox value="apple">苹果</checkbox>
<checkbox value="banana">香蕉</checkbox>
<checkbox value="orange">橙子</checkbox>
</checkbox-group>
</view>
</template>
<script>
export default {
data() {
return {
selectedFruits: [] // 用于存储选中的水果
}
}
}
</script>
```
在上述示例中,`selectedFruits`是一个数组,用于存储选中的水果的值。当用户选中或取消选中复选框时,`selectedFruits`数组会自动更新。
阅读全文