![uni-app官网](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/logo.png)
![uni-app官网](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png)
简体中文
HarmonyOS Next 兼容性
HarmonyOS Next |
---|
HBuilderX 4.23 |
用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。
for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有:<button>
, <checkbox>
, <radio>
, <switch>
。
属性说明
属性名 | 类型 | 说明 |
---|---|---|
for | String | 绑定控件的 id |
属性 HarmonyOS Next 兼容性
名称 | HarmonyOS Next 兼容性 |
---|---|
disabled | HBuilderX 4.23 |
for | HBuilderX 4.23 |
注:
示例 查看演示
以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
Template
Script
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<view class="uni-common-mt">
<view class="uni-form-item uni-column">
<view class="title">表单组件在label内</view>
<checkbox-group class="uni-list" @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
<view>
<checkbox :value="item.name" :checked="item.checked"></checkbox>
</view>
<view>{{item.value}}</view>
</label>
</checkbox-group>
</view>
<view class="uni-form-item uni-column">
<view class="title">label用for标识表单组件</view>
<radio-group class="uni-list" @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
<view>
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
</view>
<view>
<label class="label-2-text" :for="item.name">
<text>{{item.value}}</text>
</label>
</view>
</label>
</radio-group>
</view>
<view class="uni-form-item uni-column">
<view class="title">label内有多个时选中第一个</view>
<checkbox-group class="uni-list" @change="checkboxChange">
<label class="label-3">
<view class="uni-list-cell uni-list-cell-pd">
<checkbox class="checkbox-3">选项一</checkbox>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<checkbox class="checkbox-3">选项二</checkbox>
</view>
<view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
</label>
</checkbox-group>
</view>
</view>
</view>
</template>