uni-app与小程序的单选与多选

最新推荐文章于 2025-06-11 22:57:45 发布

oneiric_origin

最新推荐文章于 2025-06-11 22:57:45 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/oneiric_origin/article/details/106358742

本文介绍了uni-app与小程序在实现单选和多选功能时的区别。在uni-app中，多选使用picker组件，而单选则通过radio-group组件完成，与小程序的select不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-app中的多选与小程序的多选是不一样的，小程序一般是select用来书写多选，但是，在uni-app中是picker 组件进行代替。

<template>
  <view>
    <picker @change="bindPickerChange" :value="num" :range="array">
      <view class="picker">
        当前选择：{{array[num]}}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data () {
    return {
      num: 0,
      array: ['第一名', '第二名', '第三名']
    }
  },
  methods: {
    bindPickerChange (e) {
		var that = this
		this.num = e.target.value
        console.log("打印数据",e.target.value)//数组从0开始
    }
  }
}

</script>

uni-app中的单选用 radio-group 组件进行代替radio

<template>
  <view>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked"/> {{item.name+":"+item.value}}
      </label>
    </radio-group>
  </view>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {name: 'USA', value: '美国'},
        {name: 'CHN', value: '中国', checked: 'true'},
        {name: 'BRA', value: '巴西'},
        {name: 'JPN', value: '日本'},
        {name: 'ENG', value: '英国'},
        {name: 'TUR', value: '法国'}
      ]
    }
  },
  methods: {
    radioChange (e) {
      console.log("打印国家名称",e.target.value)
    }
  }
}

</script>