微信小程序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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
微信小程序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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
xml和web特殊字符
2009/04/28 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
PHP守护进程实例
2015/03/06 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
python实现傅里叶级数展开的实现
2018/07/21 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
关于Java String的一道面试题
2013/09/29 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
敬老院标语
2014/06/27 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
培训班通知
2015/04/25 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
详解Redis瘦身指南
2021/05/26 Redis
css样式important规则的正确使用方式
2022/06/10 HTML / CSS