在《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数组中添加或删除选项。与其他组件联动：你可以将单选框与其他组件（如下拉选择框、输入框等）联动，根据单选框的选中状态改变其他组件的显示或可用状态。
国际化：如果你的应用支持多种语言，你可以将单选框的标签文本翻译成不同的语言，以满足不同用户的需求。
通过这些玩法，你可以将单选框组件变得更加灵活和有趣，提升用户的使用体验。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...