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 ...
随机推荐
- Wireshark使用介绍(一):Wireshark基本用法
抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接口.点击Capture Opti ...
- mysql数据库优化之索引的维护和优化
这里是一个工具,即pt-duplicate-key-checker工具 用来检查重复及冗余的索引 用法如下:pt-duplicate-key-checker -uroot -p密码 -h127. ...
- 自动获取客户端的ip地址
document.writeln('<script src=\"http://pv.sohu.com/cityjson?ie=utf-8\"></script&g ...
- 解决pycharm左侧项目文件名中文字体乱码情况?中文显示口口口口.
解决pycharm左侧项目文件名中文字体乱码情况?中文显示口口口口. 点击file,进入settings 出现 Appearance & Behavior 点击Appearance UI Op ...
- Redis的数据结构、通用操作及其特性
Redis的数据结构 五种数据类型: 字符串(String).字符串列表(list).字符串集合(set).有序字符串集合(sorted set).哈希(hash) key定义的注意点: 不要过长,不 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- vue项目创建过程
在使用vue-cli之前,请确认你的电脑已经安装了 node,建议版本在 8.0.0 以上 可以通过node -v 检查版本 1.安装 vue-cli (这里我们确认已安装过node) 1.使用 np ...
- Java集合中的细节
integer数据对比 对于Integer var = ? 在-128至127范围内的赋值,Integer对象是在IntegerCache.cache产生,会复用已有对象,这个区间内的Integer值 ...
- VS2010下安装boost库
在我们的C++项目中安装boost库,下面以VS2010版本作为例子,其它版本的设置也差不多. 一.编译生成boost库 1.下载最新的boost(本人下载的是boost_1_56_0).boost官 ...
- bug日记之-------java.io.IOException: Server returned HTTP response code: 400 for URL
报的错误 出事代码 出事原因 解决方案 总结 多看源码, 我上面的实现方式并不好, 如果返回的响应编码为400以下却又不是200的情况下getErrorStream会返回null, 所以具体完美的解决 ...