uniapp中单选按钮的实现代码示例

 更新时间:2023年01月17日 09:16:58   作者:周小航.  
uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能,但是它功能是在不能满足需求,下面这篇文章主要给大家介绍了关于uniapp中单选按钮的实现代码,需要的朋友可以参考下

标签说明:

radio-group:单项选择器,内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。

radio:单选项目

属性说明:

@change:<radio-group> 标签中的radio选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value}

value:<radio> 标识。当该 <radio> 选中时,<radio-group> 的 change 事件会携带 <radio> 的 value

checked:当前是否选中,默认值false,类型是布尔值

disabled:是否禁用,默认值是false,类型是布尔值

color:radio的颜色,同css的color

注意

  • radio的默认颜色,在不同平台不一样。微信小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
  • 如需调节radio大小,可通过css的scale方法调节,如缩小到70%style="transform:scale(0.7)"
  • radio不是checkbox,点击一个已经选中的radio,不会将其取消选中

上代码:

<!-- uniapp单选框 -->
		<view class="">
			<radio-group @change="chang">
				<label v-for="item in radioGroup" :key="item">
					<radio :value="item" :checked="item==activeRadio" />{{item}}
				</label>
			</radio-group>
		</view>
 
 
<script>
      export default {
		data() {
			return {
				// 单选框数据
				activeRadio: '', //存的是单选按钮选中的value值
				radioGroup: ['苹果', '香蕉', '梨', '西红柿', '西瓜']
			}
		},
 
        methods: {
                // 单选按钮发生改变时触发的方法
			chang(e) {
				this.activeRadio = e.detail.value;  //选中按钮的value值
				console.log(this.activeRadio);
			}
}
</script>
 

打印结果:

1.获取选中按钮的value值,e.detail.value,赋值给data中activeRadio声明的变量

2.打印选中按钮的值

实际场景案例,男女单选框

<radio-group @change="radioChange" class="value checked" style="font-size: 13px;">
	<label class="radio">
		<radio style="zoom: 0.8;" :color="roleColor" value="1" :checked="sex == '1'" />男
	</label>
	<label class="radio" style="margin-left: 15%;">
	    <radio style="zoom: 0.8;" :color="roleColor" value="2" :checked="sex == '2'" />女
	</label>
</radio-group>
 
 
<script>
    export default {
		data() {
			return {
 
				// 单选框数据
				sex: "", //存的是单选按钮选中的value值,性别值
 
			}
		},
        methods: {
            radioChange(evt) {
				// console.log(evt);
				this.sex = evt.detail.value;
			},
}
    
</script>

效果图:

总结

到此这篇关于uniapp中单选按钮实现的文章就介绍到这了,更多相关uniapp单选按钮实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • javascript for循环从入门到偏门(效率优化+奇特用法)

    javascript for循环从入门到偏门(效率优化+奇特用法)

    for循环是非常基础的javascript知识,但由于JS太灵活了,所以可能出现一些让初学者崩溃的写法。我决定由浅入深的解释一下for循环,算是给比我还新手的新手解惑吧,少走弯路
    2012-08-08
  • 屏蔽F1~F12的快捷键的js函数

    屏蔽F1~F12的快捷键的js函数

    keyCod从113-123分别禁用了F2-F12键,13禁用了回车键(Enter),8禁用了退格键(BackSpace)
    2010-05-05
  • 关于ES6的六个小特性(二)

    关于ES6的六个小特性(二)

    ES6提供了大量新的好的东西,在过去的一年内,浏览器提供商做了大量的辛勤工作将新的语言特性更新到他们的浏览器中。尽管有重大的更新,很多小的语言更新另我眼前一亮,下面这篇文章主要介绍了关于ES6的六个小特性,需要的朋友可以参考下。
    2017-02-02
  • webpack4 SCSS提取和懒加载的示例

    webpack4 SCSS提取和懒加载的示例

    这篇文章主要介绍了webpack4 SCSS提取和懒加载的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Webpack 服务器端代码打包的示例代码

    Webpack 服务器端代码打包的示例代码

    本篇文章主要介绍了Webpack 服务器端代码打包的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JsRender for index循环索引用法详解

    JsRender for index循环索引用法详解

    这篇文章主要介绍了JsRender for index循环索引用法,以实例形式详细分析了JsRender中循环的用法,需要的朋友可以参考下
    2014-10-10
  • Node.js API详解之 zlib模块用法分析

    Node.js API详解之 zlib模块用法分析

    这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 一文带你搞懂JS中六种For循环的使用

    一文带你搞懂JS中六种For循环的使用

    for 循环是出现最早,也是应用最普遍的一个遍历,能够满足绝大多数的遍历。可以遍历 数组、对象、字符串。本文将详细为大家介绍JS中的六种For循环的使用,需要的可以参考一下
    2022-04-04
  • JavaScript实现图片切换效果

    JavaScript实现图片切换效果

    这篇文章主要为大家详细介绍了JavaScript实现图片切换效果,以及自定义属性的应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • from表单多个按钮提交用onclick跳转不同action

    from表单多个按钮提交用onclick跳转不同action

    这篇文章主要介绍了from表单多个按钮提交用onclick跳转不同action,需要的朋友可以参考下
    2014-04-04

最新评论