2***@qq.com
2***@qq.com
  • 发布:2023-09-28 16:56
  • 更新:2023-09-28 17:46
  • 阅读:377

请问微信小程序表单中radio和switch是不能双向绑定的吗,那还有别的方法实现数据回显这两个吗

分类:HBuilderX
2023-09-28 16:56 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

可以参考这种方式

<template>  
    <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>  

要回复问题请先登录注册