Vue 动态绑定CSS样式
今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示。
效果图:
由于Element UI版本我用的是2.5.4 使用进度条的话 就没有2.9.2及更高版本的format属性,format属性:自定义进度条的文本内容
所以就只能自己实现类似于进度条的形状:
实现步骤:
1.定义一个p标签,p标签里面包含显示文本的a标签,内显文字显示为白色
<p class="rcorners4" :style="scope.row.firstQuarterSpeedofProgress|getBackgroundColor"><a style="color:white">{{scope.row.firstQuarterSpeedofProgress|getSpeedofProgress}}</a></p>
2.定义基本rcorners4样式
.rcorners4 {
text-align: center;
border-radius: 50px 50px 50px 50px;
width: 80px;
height: 26px;
}
3.通过Vue过滤器实现动态切换颜色及文本文字
getSpeedofProgress(val){
if(val==1){return '已完成'}
if(val==2){return '应完未完'}
if(val==3){return '进度滞后'}
if(val==4){return '正常推进'}
},
getBackgroundColor(val){
switch(val){
case 1: return 'background: #22A7FF';break
case 2: return 'background: red';break
case 3: return 'background: #EEEE11';break
case 4: return 'background: #2BD54D';break
default:return 'background: white';
}
}
Vue 动态绑定CSS样式的更多相关文章
- Vue之动态绑定CSS样式
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- Angular21 动态绑定CSS样式
1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...
- VUE中CSS样式穿透
VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...
- vue动态绑定类样式ClassName知多少
对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...
- Vue 框架-05-动态绑定 css 样式
Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...
- vue环境下安装npm,启动npm 修改js,css样式
vue环境下修改js,css样式 1.在所在的项目项目的resource 文件夹下面,shift + 鼠标右键--在此处打开命令行窗口: 2.在打开的窗口执行: 安装npm:npm install 启 ...
- Vue设置全局js/css样式
''' 配置全局js mian.js: import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- 一个可以自动生成css样式的插件happycss
一直在页面写css, 重复写着样式,发现布局中,特别是h5,大量的样式都是margin,padding,width,height, 而,当我们需要给一个标签写样式的时候,避免内联样式,我们又需要取cl ...
随机推荐
- Jetpack Compose和View的互操作性
Jetpack Compose Interoperability Compose风这么大, 对于已有项目使用新技术, 难免会担心兼容性. 对于Compose来说, 至少和View的结合是无缝的. (目 ...
- 入门Kubernetes - YAML文件
前言 前篇文章中简单了解到如何把.Net Core 程序部署到k8s中,过程中使用了多个*.yaml文件,那么这些文件的格式及含义.语法是如何的呢? 接下来,进一步了解学习 一.YAML介绍: 1.简 ...
- Kubernetes之job
1.运行单个任务的pod ReplicationController.ReplicaSet.DaemonSet会持续运行任务,永远达不到完成态 .这些 pod 中的进程在退出时会重新启动.但是在一个可 ...
- Elasticsearch中的Term查询和全文查询
目录 前言 Term 查询 exists 查询 fuzzy 查询 ids 查询 prefix 查询 range 查询 regexp 查询 term 查询 terms 查询 terms_set 查询 t ...
- 18、lnmp_wordpress安装
18.1.[root@web01 nginx]# mysql -uroot -p123456 mysql> show databases; #显示所有的数据库: +--------------- ...
- 并发王者课-铂金9:互通有无-Exchanger如何完成线程间的数据交换
欢迎来到<并发王者课>,本文是该系列文章中的第22篇,铂金中的第9篇. 在前面的文章中,我们已经介绍了ReentrantLock,CountDownLatch,CyclicBarrier, ...
- 基于Yarp实现内网http穿透
Yarp介绍 YARP是微软开源的用来代理服务器的反向代理组件,可实现的功能类似于nginx. 基于YARP,开发者可以非常快速的开发一个性能不错的小nginx,用于代理http(s)请求到上游的ht ...
- 13.6Comparable接口
要点提示:Comparable接口定义了conpareTo方法,用于比较对象. public interface Comparable<E>{ piblic int compareTo(E ...
- linux中的vim用法
p.p1 { margin: 0; font: 16px ".PingFang SC"; color: rgba(53, 53, 53, 1) } p.p2 { margin: 0 ...
- 华为交换机5855设置ssh
配置思路 配置交换机密钥对 #生成RSA密钥对 设置vty登陆用户界面的认证方式为AAA认证 #设置远程认证方式 设置aaa用户信息 #本地用户名和密码 #本地用户服务类型 #本地用户授权等级 设置s ...