小白学前端遇到的若干问题

开发框架：VUE3+ElementUI

一、Element Plus之el-radio中label和:label的区别

1、示例(Vue2)

1、看Element官方文档(Vue3) 中radio是这么说的

方法1：【注意看！】这里的 label = "1" 是代表 label 的值为字符串 '1'

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>


<script setup lang="ts">
	import { ref } from 'vue';
	let radio = ref('0')//上面 label="1" 表示值是字符串 '1'
</script>

方法2：【注意！！！】这里的 :label = "3" （多了:）是代表 label 的值为数字 3

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
</template>
 
<script setup lang="ts">
	import { ref } from 'vue';
	let radio = ref('0')//上面 label="1" 表示值是字符串 '1'
</script>

2、实战

需求：radio切换不同选项时，根据不同值跳转不同页面，双击radio时取消选中。

<script setup lang="ts">
	import { ref } from 'vue';
	let radio = ref(0)
	const radioChange = (e : any) => {
		e === radio ? (radio.value = 3) : (radio.value = e);
	}
</script>

<template>
	<div>
		<h1>后台管理系统-Welcome.vue</h1>
		<el-radio-group v-model="radio">
			<el-radio :label="1" @click.prevent="radioChange(1)">男</el-radio>
			<el-radio :label="0" @click.prevent="radioChange(0)">女</el-radio>
		</el-radio-group>
	</div>
</template>

<style scoped>
</style>

参考链接

https://blog.csdn.net/qq_38769403/article/details/123922865