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


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
微信小程序checkbox组件使用详解
Jan 31 #Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 #Javascript
浅析Angular19 自定义表单控件
Jan 31 #Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 #Javascript
微信小程序switch开关选择器使用详解
Jan 31 #Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 #Javascript
微信小程序slider组件使用详解
Jan 31 #Javascript
You might like
第五节 克隆 [5]
2006/10/09 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python 数据结构之旋转链表
2017/02/25 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
网站客服岗位职责
2014/04/05 职场文书
法人代表证明书格式
2014/10/01 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
仰望星空观后感
2015/06/10 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB