label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：<button>, <checkbox>, <radio>, <switch>。

属性说明

属性名类型说明
forString绑定控件的 id

注：

  • app-nvue平台 暂不支持for属性示例
  1. <template>
  2.     <view>
  3.         <view class="uni-common-mt">
  4.             <view class="uni-form-item uni-column">
  5.                 <view class="title">表单组件在label内</view>
  6.                 <checkbox-group class="uni-list" @change="checkboxChange">
  7.                     <label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
  8.                         <view>
  9.                             <checkbox :value="item.name" :checked="item.checked"></checkbox>
  10.                         </view>
  11.                         <view>{{item.value}}</view>
  12.                     </label>
  13.                 </checkbox-group>
  14.             </view>
  16.             <view class="uni-form-item uni-column">
  17.                 <view class="title">label用for标识表单组件</view>
  18.                 <radio-group class="uni-list" @change="radioChange">
  19.                     <label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
  20.                         <view>
  21.                             <radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
  22.                         </view>
  23.                         <view>
  24.                             <label class="label-2-text" :for="item.name">
  25.                                 <text>{{item.value}}</text>
  26.                             </label>
  27.                         </view>
  28.                     </label>
  29.                 </radio-group>
  30.             </view>
  32.             <view class="uni-form-item uni-column">
  33.                 <view class="title">label内有多个时选中第一个</view>
  34.                 <checkbox-group class="uni-list" @change="checkboxChange">
  35.                     <label class="label-3">
  36.                         <view class="uni-list-cell uni-list-cell-pd">
  37.                             <checkbox class="checkbox-3">选项一</checkbox>
  38.                         </view>
  39.                         <view class="uni-list-cell uni-list-cell-pd">
  40.                             <checkbox class="checkbox-3">选项二</checkbox>
  41.                         </view>
  42.                         <view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
  43.                     </label>
  44.                 </checkbox-group>
  45.             </view>
  47.         </view>
  48.     </view>
  49. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             checkboxItems: [{
  5.                     name: 'USA',
  6.                     value: '美国'
  7.                 },
  8.                 {
  9.                     name: 'CHN',
  10.                     value: '中国',
  11.                     checked: 'true'
  12.                 }
  13.             ],
  14.             radioItems: [{
  15.                     name: 'USA',
  16.                     value: '美国'
  17.                 },
  18.                 {
  19.                     name: 'CHN',
  20.                     value: '中国',
  21.                     checked: 'true'
  22.                 }
  23.             ],
  24.             hidden: false
  25.         }
  26.     },
  27.     methods: {
  28.         checkboxChange: function(e) {
  29.             console.log(e)
  30.             var checked = e.target.value
  31.             var changed = {}
  32.             for (var i = 0; i < this.checkboxItems.length; i++) {
  33.                 if (checked.indexOf(this.checkboxItems[i].name) !== -1) {
  34.                     changed['checkboxItems[' + i + '].checked'] = true
  35.                 } else {
  36.                     changed['checkboxItems[' + i + '].checked'] = false
  37.                 }
  38.             }
  39.         },
  40.         radioChange: function(e) {
  41.             var checked = e.target.value
  42.             var changed = {}
  43.             for (var i = 0; i < this.radioItems.length; i++) {
  44.                 if (checked.indexOf(this.radioItems[i].name) !== -1) {
  45.                     changed['radioItems[' + i + '].checked'] = true
  46.                 } else {
  47.                     changed['radioItems[' + i + '].checked'] = false
  48.                 }
  49.             }
  50.         }
  51.     }
  52. }

uniapp

发现错误？想参与编辑？在 GitHub 上编辑此页面！