目录标签说明:属性说明:上代码:实际场景案例,男女单选框总结标签说明: radio-group:单项选择器,内部由多个 <radio> 组成。通过把多
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
注意
<!-- 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单选按钮实现内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: uniapp中单选按钮的实现代码示例
本文链接: https://www.lsjlt.com/news/177960.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0