欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

微信小程序radio组件使用详解

时间:2021-05-25 08:21:31|栏目:JavaScript代码|点击:

本文为大家分享了微信小程序radio组件的使用方法,供大家参考,具体内容如下

效果图

radio组件效果图

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: '美国' },
   { name: 'CHN', value: '中国', checked: 'true' },
   { name: 'BRA', value: '巴西' },
   { name: 'JPN', value: '日本' },
   { name: 'ENG', value: '英国' },
   { name: 'TUR', value: '法国' },
  ],
  radioStr: '中国'
 },
 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 });
 }
})

总结

由于e.detail.value是一个字符串,所以直接采用for…of…对比就可以确定点击目标。

DEMO下载

上一篇:浅析JavaScript基本类型与引用类型

栏    目:JavaScript代码

下一篇:Bootstrap Validator 表单验证

本文标题:微信小程序radio组件使用详解

本文地址:http://www.codeinn.net/misctech/128388.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有