微信小程序表单类组件label使用详解

微信小程序表单类组件label使用详解

本篇经验将继续分享表单类组件中 label 标签组件的使用详解。这个组件主要用于改进部分表单类组件的可用性。本篇经验将基于第一个手工构建的微信小程序演示，具体构建步骤，可以参考如下经验引用。

0微信小程序开发实战--手工开发第一个小程序

先百度搜索查看 label 标签组件的官方文档，该组件目前主要用于改进部分表单类组件的可用性，包括：button组件，checkbox组件，radio组件和switch组件。其支持两种方式进行绑定：一是通过 for 指定组件ID来绑定，另一种是将待改进组件直接写在 label 标签内部即可。

在 wxml 文件中通过 标签增加 checkbox 和 radio 的可用性：

1. 通过 label 组件包含 checkbox 组件和 text 组件来完成增强；

2. 通过 label 组件的 for 属性关联 radio 组件的 ID 来完成增强；

注意：组件可用性增强的效果即点击复选框和单选框后面的文字同样可以完成勾选和取消勾选的动作。

在 js 文件中定义上面数据绑定中所使用的变量的初始值。

在 wxss 中声明 wxml 中所使用类的样式定义。

保存编译，在模拟器中查看页面效果，点击复选框和单选框后面的文本，也可以完成勾选和取消勾选的动作，效果符合预期。