<el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</el-tooltip> <script>
export default {
data() {
return {
value: '100',
}
}
};
</script>

  设置active-valueinactive-value属性,接受BooleanStringNumber类型的值。

一般前后台关联场景使用情况下,注意inactive-value属性的参数类型。

比如后台返回int 类型,那么inactive-value的值就不能在前台加双引号,这样会引起类型错误,错误将会引起按钮不按实际情况控制。

<el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value=activevalue
inactive-value=iactivevalue>
</el-switch>
</el-tooltip> <script>
export default {
data() {
return {
        value: '100',
activevalue:100,
iactivevalue:0
}
}};

</script>

  假设后台返回值是string类型,如果没进行任何转换,那么给

activevalue赋值时将会失败,按钮不会被启动

element-ui switch的更多相关文章

  1. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  2. vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  3. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  4. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  5. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  6. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  7. Vue + Element UI项目初始化

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

  8. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

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

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

  10. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

随机推荐

  1. 掌控安全学院SQL注入靶场宽字节注入

    在php中,magic_quotes_gpc这个函数为on时,就开启了转义功能,另外addslashes和mysql_real_escape_string也可以实现转义功能.可转移的的内容包括:单双引 ...

  2. 2018GPLT

    2018GPLT 7-1 天梯赛座位分配 一共有n所学校参加比赛,每所学校有\(a_i\)只队伍,每只队伍共10人,要保证每个学校的所有队员不能相邻就坐,令每一所学校的队伍排成一排纵列,然后从第一所学 ...

  3. 2022年JMUCTF WP

    2022年JMUCTF WP crypto 2,Are you ok Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. ...

  4. zabbix中文显示乱码解决

    问题zabbix使用中文显示,"监测-->图形"查看资源使用情况时会有乱码 解决问题1.修改配置文件(文件位置:$zabbix_path/include/defines.in ...

  5. wait notify 实例,生产消费者模式(转)

    今天发现了一段很标准的多线程代码,记得以前也写过,但是没有这个这么小巧和标准. import java.util.LinkedList; import java.util.Queue; import ...

  6. 一 MySQL的架构与历史1.1--1.4

    1.1 MySQL逻辑架构 最上层的服务并不是 MySQL 所独有的,大多数基于网络的客户端/服务器的工具或者服务都有类似的架构.比如连接处理.授权认证.安全等等. 第二层架构是MySQL比较有意思的 ...

  7. nginx调试和location用法,匹配url

    1.nginx调试输出内容到页面 location = /demo { charset utf-8; default_type text/html; return 500 "服务正在升级,请 ...

  8. PC端 图片宽度是百分比,动态设置图片高度为 6:9

    我们知道图片宽度可以设置  百分比,但是高度要给一个固定值  不然不生效,并且产品要求图片显示必须是9:6,这开始确实难倒我了 后面想了一下用js  获取图片宽度  动态的计算高度就行了,超简单 se ...

  9. 城壁 (Rampart)

    题意简述 给定一张 $H \times W $ 的网格图,其中有 \(P\) 个被标记的点,求边长为 \(L\) 或以上的正方形的个数,要求正方形的边不得经过被标记的点. \(1 \le H,W \l ...

  10. flex布局的相关注意事项

    文献参考地址:https://www.cnblogs.com/qcloud1001/p/9848619.html 重点事项: 弹性容器的属性 作用于交叉轴 align-items :对单行起作用 al ...