在《uni-app》中,单选框(Radio)是一种常用的表单组件,用于从一组选项中选择一个。下面是一个简单的单选框代码案例,展示了如何在《uni-app》中实现单选框功能,并提供了一些有趣的玩法。

单选框基础代码案例
首先,我们需要创建一个包含单选框的页面或组件。以下是一个基本的示例:
vue复制代码
<template> | |
<view class=”container”> | |
<radio-group @change=”radioChange”> | |
<label class=”radio” v-for=”(item, index) in radioList” :key=”index”> | |
<radio :value=”item.value” :checked=”item.checked”>{{ item.label }}</radio> | |
</label> | |
</radio-group> | |
<view class=”result”>选中的值是:{{ selectedValue }}</view> | |
</view> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
radioList: [ | |
{ label: ‘选项1’, value: ‘1’, checked: false }, | |
{ label: ‘选项2’, value: ‘2’, checked: false }, | |
{ label: ‘选项3’, value: ‘3’, checked: false } | |
], | |
selectedValue: ” | |
}; | |
}, | |
methods: { | |
radioChange(e) { | |
const value = e.detail.value; | |
this.radioList = this.radioList.map(item => ({ | |
…item, | |
checked: item.value === value | |
})); | |
this.selectedValue = value; | |
} | |
} | |
}; | |
</script> | |
<style scoped> | |
.container { | |
padding: 20px; | |
} | |
.radio { | |
display: block; | |
margin-bottom: 10px; | |
} | |
.result { | |
margin-top: 20px; | |
font-size: 16px; | |
color: #333; | |
} | |
</style> |
在这个例子中,我们创建了一个radio-group
组件,它包含了多个radio
组件。每个radio
组件都有一个value
属性和一个checked
属性,分别表示其值和是否被选中。我们通过v-for
指令遍历radioList
数组来生成单选框选项。当用户选择一个单选框时,radioChange
方法会被触发,更新radioList
中每个选项的checked
状态,并设置selectedValue
为选中的值。
有趣的玩法
动态添加选项:你可以根据用户的操作或数据的变化动态地向
radioList
数组中添加或删除选项。与其他组件联动:你可以将单选框与其他组件(如下拉选择框、输入框等)联动,根据单选框的选中状态改变其他组件的显示或可用状态。
国际化:如果你的应用支持多种语言,你可以将单选框的标签文本翻译成不同的语言,以满足不同用户的需求。
通过这些玩法,你可以将单选框组件变得更加灵活和有趣,提升用户的使用体验。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...