ElementUI之el-radio中label和:label的区别【避免踩坑】

需求：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>