uniapp或原生微信小程序实现单选框（radio）

这里给了两个案例，分别为原生微信和uniapp实现单选的语法，其实这两种语法差距不是太大，稍微改下就可以。

先看文档：

 

原生微信写法：

<radio-group bindchange="radioChange">
    <label wx:for="{{items}}">
        <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </label>
</radio-group>

Page({ 
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)//e.detail.value就是每次选择后得出来的值
  }
})

 

uniapp写法：

<radio-group @change="radioChange">
    <label v-for="i in items">
        <radio :value="i.name" :checked="i.checked"/>{{i.value}}
    </label>
</radio-group>

Page({ 
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)//e.detail.value就是每次选择后得出来的值
  }
})

 

你可能需要以下内容：

uniapp开发微信小程序实现多选全选反选功能

自定义微信小程序单选框宽高颜色等样式

uniapp或原生微信小程序实现单选框（radio）