单选框el-radio-group

<el-tab-pane name="body" label="请求体(Body)">
    <el-radio-group v-model="bodyType" class="ml-4">
        <el-radio label="json" size="large">aplication/json</el-radio>
        <el-radio label="form" size="large">x-www-form-urlencoded</el-radio>
        <el-radio label="file" size="large">form-data</el-radio>
    </el-radio-group>
    <!-- 根据选择参数的类型显示对应的内容 -->
    <div>
        <CodeEdit
            v-if="bodyType === 'json'"
            height="280px"
            v-model="jsonParams"
            lang="json"
        ></CodeEdit>
        <CodeEdit
            v-else-if="bodyType === 'form'"
            height="280px"
            v-model="dataParams"
            lang="json"
        ></CodeEdit>
    </div>
</el-tab-pane>
<script>
import CodeEdit from './CodeEdit.vue'
import sqlObject from '../assets/js/scriptTemplate'

export default {
  data() {
    return {
      // 后台所有测试用的文件
      fileList: [],
      // 默认激活的标签页
      activeTab: 'body',
      // 请求体参数的类型
      bodyType: 'json',
      caseInfo: null,
      // 页面内容输入绑定的数据
      url: '',
      method: '',
      name: '',
      headers: '{}',
      params: '{}',
      setup_script: '',
      teardown_script: '',
      jsonParams: '',
      dataParams: '',
      // 文件上传的参数
      editFiles: [
        // ['name1', 'text', 999],
        // ['name1', 'file', ['name.py', 'file/name.py', 'text/py']],
      ],
    }
  },
</script>

一、怎么实现单选框，选中哪个选项 下方就展示对应选项的信息？

（1）el-radio-group添加v-model="bodyType"，bodyType名字自己随意编写

（2）data里面写入默认值bodyType:' '

（3）el-radio标签里面的label属性对应的值就是bodyType所对应的值。当选择哪一个单选框的时候，label='xxx'就会赋值给bodyType

（4）然后直接v-if去判断data里面的bodyType的值展示不同的内容就好了。