脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element-ui radio单选框label布尔/数值的坑

解决Element-ui radio单选框label布尔/数值的一个坑

 更新时间：2023年04月18日 15:37:28   作者：前端打工人  
这篇文章主要介绍了解决Element-ui radio单选框label布尔/数值的一个坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Element-ui radio单选框label布尔/数值的坑

element-ui单选框

大家是不是都是这样写的，后端需要的数据是布尔类型true、false，这样写就导致保存及编辑显示的时候还得处理一次，有点小麻烦

<el-radio-group v-model="radio">
      <el-radio-button label="是"></el-radio-button>
       <el-radio-button label="否"></el-radio-button>
</el-radio-group>

element-ui单选框可以绑定string/number/boolean类型的数据

正确操作方法

如果需要绑定数值或者布尔类型的值，需要在label前加上:，像这样：

<el-radio-group v-model="radio">
      <el-radio :label="true">是</el-radio>
    <el-radio :label="false">否</el-radio>
</el-radio-group>

Element el-radio单选框详解

1. 用途

单选框使用的场景非常普遍，用于列出多个选项，供用户选择其中一个。

注意Select选择器也可以从多个选项中选择一个，单选框的优势是可以在界面上同时显示所有选项，缺点是选项多时占用空间大。

而选择器优势是占用空间小(选项下拉选择时才显示)，缺点是必须要下拉时才能显示所有选项。

2. 单选框

单选框HTML代码如下：

	<el-radio v-model="radio1" label="male">男</el-radio>
    <el-radio v-model="radio1" label="female">女</el-radio>
    选中:{{radio1}}
    <el-divider></el-divider>

需要注意，汉字部分表示显示内容，label表示选中的值，v-model表示绑定的JS变量。JS部分代码：

radio1: 'male',

效果如下：

3. 单选框样式

单选框添加按钮边框样式，通过border属性实现。

HTML代码：

	<el-radio v-model="radio2" label="basketball" border>篮球</el-radio>
    <el-radio v-model="radio2" label="football" border>足球</el-radio>
    选中:{{radio2}}
    <el-divider></el-divider>

JS代码：

radio2: 'basketball',

效果如下：

4. 单选框组

可以使用el-radio-group标签将单选框包围起来，这样只需要设置一个v-model绑定变量即可。这样的方式会将同一组的选项放在一个标签内，使用起来更加符合习惯。示例：

HTML代码：

    <el-radio-group v-model="radio3">
      <el-radio label="male">男</el-radio>
      <el-radio label="female">女</el-radio>
    </el-radio-group>
    选中:{{radio3}}
    <el-divider></el-divider>

JS代码：

radio3: 'male',

效果：

4. 单选框组样式

Element为单选框组也提供了按钮样式，看起来更加富有科技感。

HTML代码：

	<el-radio-group v-model="radio4">
      <el-radio-button label="chinese">语文</el-radio-button>
      <el-radio-button label="math">数学</el-radio-button>
      <el-radio-button label="english">英语</el-radio-button>
    </el-radio-group>
    <el-divider></el-divider>

JS代码：

radio4: 'chinese',

效果：

5. 尺寸调节

针对按钮样式的单选框和单选框组，可以使用size调整其大小，例如：

    <el-radio-group v-model="radio4" size="medium">
      <el-radio-button label="chinese">语文</el-radio-button>
      <el-radio-button label="math">数学</el-radio-button>
      <el-radio-button label="english">英语</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="radio4" size="small">
      <el-radio-button label="chinese">语文</el-radio-button>
      <el-radio-button label="math">数学</el-radio-button>
      <el-radio-button label="english">英语</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="radio4" size="mini">
      <el-radio-button label="chinese">语文</el-radio-button>
      <el-radio-button label="math">数学</el-radio-button>
      <el-radio-button label="english">英语</el-radio-button>
    </el-radio-group>
    <el-divider></el-divider>

效果如下：

6. 绑定值变化事件

当绑定值发生变化时，可以通过@change指定触发的事件方法。例如：

HTML代码：

   	<el-radio @change="sexChange" v-model="radio1" label="male">男</el-radio>
    <el-radio @change="sexChange" v-model="radio1" label="female">女</el-radio>
    <el-divider></el-divider>
    <el-radio-group v-model="radio4" @change="courseChange">
      <el-radio-button label="chinese">语文</el-radio-button>
      <el-radio-button label="math">数学</el-radio-button>
      <el-radio-button label="english">英语</el-radio-button>
    </el-radio-group>

JS代码：

export default {
  data() {
    return {
      radio1: 'male',
      radio2: 'basketball',
      radio3: 'male',
      radio4: 'chinese',
    };
  },
  methods: {
    sexChange() {
      console.log("sexChange");
    },
    courseChange() {
      console.log("courseChange");
    }
  }
}

当选中项变化时，就会触发对应的methods中定义的方法。

注意：

el-radio提供了比较多的单选按钮实现方式，建议还是使用单选框组，代码结构更加清晰容易管理。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue3实现可视化拖拽标签小程序功能

    Vue3实现可视化拖拽标签小程序功能

    这篇文章主要介绍了Vue3实现可视化拖拽标签小程序,实现功能可视化标签拖拽，双击标签可修改标签内容，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-09-09
  • Vue elementui字体图标显示问题解决方案

    Vue elementui字体图标显示问题解决方案

    这篇文章主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • vue2.0开发实践总结之入门篇

    vue2.0开发实践总结之入门篇

    这篇文章主要为大家总结了vue2.0开发实践之入门,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 解决antd的Form组件setFieldsValue的警告问题

    解决antd的Form组件setFieldsValue的警告问题

    这篇文章主要介绍了解决antd的Form组件setFieldsValue的警告问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue+express生成token方式

    vue+express生成token方式

    这篇文章主要介绍了vue+express生成token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 在 Vue 中使用 JSX 及使用它的原因浅析

    在 Vue 中使用 JSX 及使用它的原因浅析

    这篇文章主要介绍了在 Vue 中使用 JSX 及使用它的原因浅析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue项目实现页面跳转的方法

    vue项目实现页面跳转的方法

    这篇文章主要给大家分享的是vue项目实现页面跳转的方法，vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转,需要的朋友可以参考一下
    2021-11-11
  • vue路由三种传参方式详细讲解

    vue路由三种传参方式详细讲解

    在Vue中有多种方式可以进行路由跳转并传递参数,这篇文章主要给大家介绍了关于vue路由三种传参方式的相关资料,文中介绍的方法分别包括params传参、query传参(显示传参)以及props传参(路由组件传参),,需要的朋友可以参考下
    2023-10-10
  • vue 实现搜索的结果页面支持全选与取消全选功能

    vue 实现搜索的结果页面支持全选与取消全选功能

    这篇文章主要介绍了vue 实现搜索的结果页面支持全选与取消全选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 用Vue.js开发网页时钟

    用Vue.js开发网页时钟

    这篇文章主要为大家详细介绍了用Vue.js开发一个网页时钟，分为白天模式和夜晚模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论