当前位置: 首页 > 工具软件 > GROUP-E > 使用案例 >

uniapp单选框radio-group动态赋值

许胡非
2023-12-01

uniapp 官网关于单选框的详解 :https://uniapp.dcloud.io/component/radio.html

实现思路
定义一个变量conclusionRadio,checked的状态通过更改这个值去更新。
可以根据业务场景调用updateConclusionStatus(true) 或者 updateConclusionStatus(false) 方法

代码如下

<view class="chk-conclusion">
	<label class="label-title">人工结论</label>
	<radio-group @change="conclusionChange" class="labelbox">
		<label class="radio">
			<radio value="No Suspect" :checked="conclusionRadio==0" /> 未见异常
		</label>
		<label class="radio" style="margin-left: 20px;">
			<radio value="With Suspect" :checked="conclusionRadio==1" /> 发现异常
		</label>
	</radio-group>
</view>
<script>
export default {
	data() {
		return {
			conclusion: 'No Suspect',
			conclusionRadio: 0,
		};
	},
	methods: {
		// change事件
		conclusionChange(e) {
			this.conclusion = e.detail.value
		},
		
		// 自定义 更新radio-group的值
		updateConclusionStatus(status) {
			if (status) {
				this.conclusion = "With Suspect"
				this.conclusionRadio = 1
			} else {
				this.conclusion = "No Suspect"
				this.conclusionRadio = 0
			}
		},
	}	
};
</script>
 类似资料: