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循环从入门到偏门(效率优化+奇特用法)
for循环是非常基础的javascript知识,但由于JS太灵活了,所以可能出现一些让初学者崩溃的写法。我决定由浅入深的解释一下for循环,算是给比我还新手的新手解惑吧,少走弯路2012-08-08from表单多个按钮提交用onclick跳转不同action
这篇文章主要介绍了from表单多个按钮提交用onclick跳转不同action,需要的朋友可以参考下2014-04-04
最新评论