radio

单选框

示例

  2. <template>
  3.   <view>
  4.     <view class="box">
  5.       <radio
  6.         checked="{{ radioValue1 }}"
  7.         label="Option1"
  8.         c-bind:change="valueChange1"
  9.         >
  10.       </radio>
  11.     </view>
  12.     <view class="title"><text>value: {{ radioValue1 ? 'true' : 'false' }}</text></view>
  13.     <view class="box">
  14.       <radio
  15.         checked="{{ radioValue2 }}"
  16.         label="Option3"
  17.         position="right"
  18.         c-bind:change="valueChange2"
  19.         >
  20.       </radio>
  21.     </view>
  22.     <view class="title"><text>value: {{ radioValue2 ? 'true' : 'false'  }}</text></view>
  23.     <view class="box">
  24.       <radio
  25.         checked="{{ radioValue3 }}"
  26.         label="Option2"
  27.         disabled="{{ true }}"
  28.         >
  29.       </radio>
  30.     </view>
  31.     <view class="title"><text>value: {{ radioValue3 ? 'true' : 'false' }}</text></view>
  32.     <view class="box">
  33.       <radio
  34.         checked="{{ radioValue4 }}"
  35.         label="Option3"
  36.         position="right"
  37.         disabled="{{ true }}"
  38.         >
  39.       </radio>
  40.     </view>
  41.     <view class="title"><text>value: {{ radioValue4 ? 'true' : 'false' }}</text></view>
  42.   </view>
  43. </template>
  44. <script>
  45. class Radio {
  46.   data = {
  47.     radioValue1:false,
  48.     radioValue2:true,
  49.     radioValue3:true,
  50.     radioValue4:false
  51.   }
  52.   methods = {
  53.     valueChange1 (e) {
  54.       this.radioValue1 = e.detail.value;
  55.     },
  56.     valueChange2 (e) {
  57.       this.radioValue2 = e.detail.value;
  58.     }
  59.   }
  60. }
  61. export default new Radio();
  62. </script>
  63. <style scoped>
  64. .container {
  65.   position: absolute;
  66.   top: 88cpx;
  67.   left: 0;
  68.   right: 0;
  69.   bottom: 0;
  70. }
  71. .title {
  72.   font-size: 38cpx;
  73.   font-weight: 400;
  74.   margin: 20cpx 0;
  75.   padding: 10cpx 30cpx;
  76.   background: #eee
  77. }
  78. .radio-value {
  79.   font-size: 32cpx;
  80. }
  81. .box {
  82.   margin: 0cpx 50cpx;
  83. }
  84. </style>
  86. <script cml-type="json">
  87. {
  88.   "base": {}
  89. }
  90. </script>