uniapp或原生微信小程序实现单选框(radio)

这里给了两个案例,分别为原生微信和uniapp实现单选的语法,其实这两种语法差距不是太大,稍微改下就可以。 先看文档: 原生微信写法: <radio-group bindchange="radioChange">...

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

先看文档:

attachments-2020-07-OcrNUYfp5f23d2ef2e074.png


原生微信写法:

<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)


你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
粪斗
粪斗

185 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章