<template>
<!-- 需求:使用 <el-radio> 关于性别单选 前端显示中文,传值为Number -->
<div class="demo">
<!-- 新增部分 -->
<el-radio-group v-model="newSex" @change="openNewRadio">
<el-radio label="0">男</el-radio>
<el-radio label="1">女</el-radio>
</el-radio-group>
<!-- 修改部分 -->
<el-radio-group v-model="editSex" @change="openEditRadio">
<el-radio :label="0">男</el-radio> <!-- 这一块与新增部分的区别在于 label :label -->
<el-radio :label="1">女</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
name: 'demo',
data() {
return {
newSex: '',
editSex: '',
}
},
created() {
this.editSex = 1; // 修改部分后台返回的值,需要将后台的值回显在前端页面
},
methods: {
openNewRadio(v) {
console.log(v) // 打印为 0 或 1
},
openEditRadio(v) {
console.log(v) // 打印为 0 或 1
}
}
} </script>
<style scoped> </style>

element-ui <el-radio> 回显格式为中文 传值格式为数值的更多相关文章

  1. element-ui <el-select> + <el-option> 回显格式为中文 传值格式为对应value

    <template> <!-- 需求:使用 <el-select> + <el-option> 关于下拉选择 前端显示中文,传值为对应格式value --&g ...

  2. 有关vue中用element ui 中的from表单提交json格式总是有冒号的问题解决办法

    因为后台要求要传递JSON格式的数据给他,然后我转了之后总是多了冒号,后来又看了自己的报错,原来是报了404错误,说明路径找不到, 数据格式 后来发现怎么都不行了,然后突然查看了报错报的是404,说明 ...

  3. Element UI tree 回显问题

    Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...

  4. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  5. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  6. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  7. Vue(十八)Element UI

    Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...

  8. 14: element ui 使用

    1.1 element ui 基本使用 参考网址: http://element.eleme.io/#/zh-CN/component/button 1.初始一个vue项目并安装element ui ...

  9. element ui 的Notification通知如何加 a 标签和按钮,并弹多个

    前言:工作中需要在页面右下角弹出很多个提醒框,提醒框上有一个可点击的a标签,并有一个按钮,同时还需要一次性关闭所有的弹出框.转载请注明出处:https://www.cnblogs.com/yuxiao ...

随机推荐

  1. 20175208『Java程序设计』课程 结对编程练习_四则运算

    20175208 结对编程练习_四则运算(第一周) 结对成员:20175208张家华,20175202葛旭阳 一.需求分析: 实现一个命令行程序,要求: (1)自动生成指定数量的小学四则运算题目(加. ...

  2. kibana查询语法 使用教程

    1. 使用双引号包起来作为一个短语搜索: "like Gecko" 2. ? 匹配单个字符; * 匹配0到多个字符 例如:kiba?a, el*search ? * 不能用作第一个 ...

  3. 用JDBC连接 数据库 进行简单的增删改查

    JDBC为java的基础.用jdbc实现对数据库的增删改查的功能是程序员的基本要求.本例以mysql为例,首先要使用本例需要添加mysql-connector-java-5.1.7-bin.jar包. ...

  4. v-charts简介

    一, v-charts简介 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2.0 和 echarts 封 ...

  5. tomcat部署jfinal项目

    1:创建一个目录:   /var/www 2:为将要部署的项目创建一个目录, /var/www/my_project 3:将项目打成 war 包, 然后解压到 /var/www/my_project ...

  6. php 加密解密算法 用于数据传输

    /** * 加密方法 * @param string $data 要加密的字符串 * @param string $key 加密密钥 * @param int $expire 过期时间 (单位:秒) ...

  7. Hadoop2-HDFS学习笔记之入门(不含YARN及MR的调度功能)

    架构 Hadoop整体由HDFS.YARN.MapReduce三大部分组成,推荐架构参考:https://www.cnblogs.com/zhjh256/p/10573684.html. 注:2.x的 ...

  8. 自制操作系统Antz(14)——实现内置编程语言(词法解析器)

    AntzScript

  9. eclipse中出现An internal error occurred during: "Initializing Java Tooling"

    关于这个问题我查了一下,就是删除.projct文件夹下的文件. 自己试了一下,这个可以及解决问题可是会出现新的问题. 1.SVN关联没了,这样做你的svn信息都没了,项目还要重新导一遍 2.出现了新的 ...

  10. Error creating bean

    问题原因 Caused by: org.hibernate.hql.internal.ast.QuerySyntaxException: bookinfo is not mapped,sql语句中的表 ...