需求:radio切换不同选项时,根据不同值跳转不同页面
实现:
1、看Element官方文档中radio是这么说的
- 方法1:
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1' //上面 label="1" 表示值是字符串 '1'
};
}
}
</script>
【注意看!】这里的 label = "1" 是代表 label 的值为字符串 '1'
- 方法2:
<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>
export default {
data () {
return {
radio: 3 //上面 :label="3" 表示值是数字 3
};
}
}
</script>
【注意!!!】这里的 :label = "3" (多了:)是代表 label 的值为数字 3
2、而我使用时却搞混杂了…
❌错误示范:
<template>
<el-radio v-model="radio" :label="1">备选项</el-radio>
<el-radio v-model="radio" :label="2">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'//上面有 : 这里值是字符串类型就选不中!!
};
}
}
</script>
✔解决方法:
直接用上面的方法1(label去掉冒号:),方法2(radio改成数值型),或者
给 :label 的值再加单引号就表示字符串类型啦!
<template>
<el-radio v-model="radio" :label="'1'">备选项</el-radio>
<el-radio v-model="radio" :label="'2'">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>