微信小程序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 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
车工岗位职责
2013/11/26 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
死亡证明书样本说明
2014/10/18 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
创业计划书之酒厂
2019/10/14 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python