Detailed instructions on the use of WeChat mini-program radio components and radio usage

Detailed instructions on the use of the mini-program radio component and radio usage

This article shares the usage of the mini-program radio component for your reference. The specific content is as follows:

WXML

<view class="tui-content"> <radio-group class="radio-group" bindchange="radioChange">  <label class="radio" wx:for="{{items}}">   <view class="tui-menu-list"><radio color="#007aff" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>  </label> </radio-group> <view class="tui-show-name">  {{radioStr}} </view></view>

JS

Page ({data: {items: [{name: 'usa', value: 'u.s.}, {name: 'chn', value: 'China', checked: 'true'}, {name: 'br', value: 'Brazil '}, {name: 'jpn', value: 'Japan '}, {name: 'eng ', value: 'British '}, {name: 'tur', value: 'French'},], radioStr: 'China'}, radioChange: function (e) {var str = null; for (var value of this. data. items) {if (value. name = e. detail. value) {str = value. value; break;} this. setData ({radioStr: str });}})

Summary

Because e. detail. value is a string... Of... Click the target after comparison.

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.