Shulou(Shulou.com)06/01 Report--

This article mainly introduces the WeChat Mini Programs form component label how to use the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone after reading this WeChat Mini Programs form component label how to use the article will have a harvest, let's take a look at it.

Label

Used to improve the usability of the form component, use the for property to find the corresponding id, or place the control under the tab, which is triggered when clicked.

For takes precedence over internal controls, and the first control is triggered by default when there are multiple controls inside.

Currently, the controls that can be bound are:.

The property name type describes the id of the forString bound control

Sample code:

Form components in label {{item.value}} label identifies form components {{item.name}} Page ({data: {checkboxItems: [{name: 'USA', value:' USA'}, {name: 'CHN', value:' China', checked: 'true'}, {name:' BRA', value: 'Brazil'}, {name: 'JPN', value:' Japan') Checked: 'true'}, {name:' ENG', value:'UK'}, {name: 'TUR', value:' France'},], radioItems: [{name: 'USA', value:' USA'}, {name: 'CHN', value:' China', checked: 'true'}, {name:' BRA', value: 'Brazil'} {name: 'JPN', value:' Japan'}, {name: 'ENG', value:' UK'}, {name: 'TUR', value:' France'},], hidden: false}, checkboxChange: function (e) {var checked = e.detail.valuevar changed = {} for (var I = 0) I < this.data.checkboxItems.length; i+ +) {if (checked.indexOf (this.data.checkboxItems [I] .name)! =-1) {changed ['checkboxItems [' + items`] .items] = true} else {changed ['checkboxItems [' + items`] .items] = false}} this.setData (changed)}, radioChange: function (e) {var checked = e.detail.valuevar changed = {} for (var I = 0) I < this.data.radioItems.length; i+ +) {if (checked.indexOf (this.data.radioItems [I] .name)! =-1) {changed ['radioItems [' + items`] .items'] = true} else {changed ['radioItems [' + items`] .items'] = false}} this.setData (changed)}}) .label-1, .label-2 {margin-bottom: 15px }. Label-1__text, .label-2__text {display: inline-block;vertical-align: middle;}. Label-1__icon {position: relative;margin-right: 10pxposition display: inline-block;vertical-align: middle;width: 18pxposition height: 18pxpolitics background: # fcfff4;}. Label-1__icon-checked {position: absolute;top: 3pxleft: 3pxcontrol width: 12pxposition height: 12pxscape background: # 1aad19;} .label-2__icon {position: relative;display: inline-block Vertical-align: middle;margin-right: 10pxposition width: 18pxposition height: 18pxpolitical background: # fcfff4;border-radius: 50px;} .label-2__icon-checked {position: absolute;left: 3pxscape top: 3pxposition width: 12pxpolitical height: 12pxpolitics background: # 1aad19borderstake radius: 50%;} .label-4_text {text-align: center;margin-top: 15px } this is the end of the article on "how to use WeChat Mini Programs form component label". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use WeChat Mini Programs form component label". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.