• label

    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 上编辑此页面！