el-radio

原创已于 2023-04-22 18:41:13 修改 · 705 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

于 2023-04-22 18:01:10 首次发布

element-ui 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中使用el-radio-group和el-radio组件创建单选框组，通过v-model进行数据绑定，并利用change事件监听用户选择的变化。示例展示了如何设置不同选项并初始化默认值。

1使用

 <el-form-item label="子女有无商业险">
          <el-radio-group v-model="formData.doChildrenHaveCommercialInsurance">
            <el-radio label="1">有</el-radio>
            <el-radio label="2">无</el-radio>
          </el-radio-group>
        </el-form-item>

1单选框组

适用于在多个互斥的选项中选择的场景

结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。

<template>
  <el-radio-group v-model="radio2">
    <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 {
        radio2: 3
      };
    }
  }
</script>