<template> <view> <page-head :title="title"></page-head> <view class="uni-padding-wrap"> <view class="uni-title">默认样式</view> <view> <label class="radio" style="margin-right: 30rpx;"> <radio value="r1" checked="true" />选中 </label> <label class="radio"> <radio value="r2" />未选中 </label> </view> </view> <view class="uni-padding-wrap"> <view class="uni-title">不同颜色和尺寸的radio</view> <view> <label class="radio" style="margin-right: 30rpx;"> <radio value="r1" checked="true" color="#FFCC33" style="transform:scale(0.7)"/>选中 </label> <label class="radio"> <radio value="r2" color="#FFCC33" style="transform:scale(0.7)"/>未选中 </label> </view> </view> <view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view> <view class="uni-list"> <radio-group @change="radioChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"> <view> <radio :value="item.value" :checked="index === current" /> </view> <view>{{item.name}}</view> </label> </radio-group> </view> </view> </template> <script> export default { data() { return { title: 'radio 单选框', items: [{ value: 'USA', name: '美国' }, { value: 'CHN', name: '中国', checked: 'true' }, { value: 'BRA', name: '巴西' }, { value: 'JPN', name: '日本' }, { value: 'ENG', name: '英国' }, { value: 'FRA', name: '法国' }, ], current: 0 } }, methods: { radioChange(evt) { for (let i = 0; i < this.items.length; i++) { if (this.items[i].value === evt.detail.value) { this.current = i; break; } } } } } </script> <style> .uni-list-cell { justify-content: flex-start } </style>