微信小程序学习笔记——常见组件【radio】

radio

单选项目  

需要搭配radio-group 一起使用

属性	类型	默认值	必填	说明
value	string		否	radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
checked	boolean	false	否	当前是否选中
disabled	boolean	false	否	是否禁用
color	string	#09BB07	否	radio的颜色，同css的color

<!--pages/radioPage/radioPage.wxml-->
<!-- 
  radio 单选框
  1 radio 标签 必须要和父元素 radio-group来使用
  2 value 选中的单元框的值
  3 需要给 radio-group 绑定 change事件
  4 需要在页面中显示 选中的值
 -->
 <radio-group bindchange="handleChange">
  <radio value="male"  color="blue">男</radio>
  <radio value="female"  color="red">女</radio>
 </radio-group>
 <view>
 您选中的是：{{gender}}
 </view>

// pages/radioPage/radioPage.js
Page({
  data: {
    gender:''
  },
  handleChange(e){
    this.setData({
      gender:e.detail.value == 'male' ? '男' : '女'
    })
  },

})