element-ui <el-radio> 回显格式为中文 传值格式为数值
<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> 回显格式为中文 传值格式为数值的更多相关文章
- element-ui <el-select> + <el-option> 回显格式为中文 传值格式为对应value
<template> <!-- 需求:使用 <el-select> + <el-option> 关于下拉选择 前端显示中文,传值为对应格式value --&g ...
- 有关vue中用element ui 中的from表单提交json格式总是有冒号的问题解决办法
因为后台要求要传递JSON格式的数据给他,然后我转了之后总是多了冒号,后来又看了自己的报错,原来是报了404错误,说明路径找不到, 数据格式 后来发现怎么都不行了,然后突然查看了报错报的是404,说明 ...
- Element UI tree 回显问题
Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
- Vue(十八)Element UI
Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...
- 14: element ui 使用
1.1 element ui 基本使用 参考网址: http://element.eleme.io/#/zh-CN/component/button 1.初始一个vue项目并安装element ui ...
- element ui 的Notification通知如何加 a 标签和按钮,并弹多个
前言:工作中需要在页面右下角弹出很多个提醒框,提醒框上有一个可点击的a标签,并有一个按钮,同时还需要一次性关闭所有的弹出框.转载请注明出处:https://www.cnblogs.com/yuxiao ...
随机推荐
- 1.字符串操作:& 2.英文词频统计预处理
1.字符串操作: 解析身份证号:生日.性别.出生地等. ID = input('请输入十八位身份证号码: ') if len(ID) == 18: print("你的身份证号码是 " ...
- 【vue】清理代码
// 一次性将这个日期选择器附加到一个输入框上 // 它会被挂载到 DOM 上. mounted: function () { // Pikaday 是一个第三方日期选择器的库 this.picker ...
- bash 和sed 和gawk
bash内建命令 命令描述 : 扩展参数列表,执行重定向操作 . 读取并执行指定文件中的命令(在当前shell环境中) alias 为指定命令定义一个别名 bg 将作业以后台模式运行 bind 将键盘 ...
- h5完美实现无刷新上传并附带上传效果
附带上传源码如下: <!DOCTYPE html> <html> <head> <title>测试上传功能</title> <meta ...
- CentOS 7编译OpenWRT
安装必要的依赖 yum install subversion binutils bzip2 gcc gcc-c++ gawk gettext flex ncurses-devel zlib-devel ...
- ADO.Net的发展史
1.演变历史: 它们是按照这个时间先后的顺序逐步出现的,史前->ODBC->OLEDB->ADO->ADO.Net. 2.下面分别介绍一下这几个. a. 史前的数据访问是什么样 ...
- C#线程同步(5)- 信号量 Semaphore
文章原始出处 http://xxinside.blogbus.com/logs/47617134.html 预备知识:C#线程同步(1)- 临界区&Lock,C#线程同步(2)- 临界区&am ...
- ES6常用语法(下)
Symbol类型 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法,新方法的名字就有可能与现有方法产生冲突.如果有一种机 ...
- vue-cli3.0 笔记
vue-cli 3.0 npm install -g @vue/cli # OR yarn global add @vue/cli ui 界面创建项目 vue ui 命令行创建项目 步骤 vu ...
- Python装饰器的另类用法
之前有比较系统介绍过Python的装饰器(请查阅<详解Python装饰器>),本文算是一个补充.今天我们一起探讨一下装饰器的另类用法. 语法回顾 开始之前我们再将Python装饰器的语法回 ...