Vue 样式切换及三元判断样式关联操作


Posted in Javascript onAugust 09, 2020

假设有需求:

后台返回状态1:启用,0:禁用

1、若要使启用为绿色,禁用不添加其他样式

<el-table-column
  prop="statusName"
  align="center"
  label="状态">
  <template slot-scope="scope">
  <div :class="{active:scope.row.status==1}">
  {{ scope.row.statusName }}
  </div>
  </template>
  </el-table-column>
 .active{
 color:green;
 }

1、若要使启用为绿色,禁用为红色,可使用三元表达式绑定样式

<el-table-column
  prop="statusName"
  align="center"
  label="状态">
  <template slot-scope="scope">
  <div :class="scope.row.status==1? 'active':'native'">
  {{ scope.row.statusName }}
  </div>
  </template>
  </el-table-column>
.active{
 color:green;
 }
 .native{
 color:red;
 }

补充知识:vue通过判断写样式(v-bind)

如下所示:

v-bind:style="$index % 2 > 0?'background-color:#FFF;':'background-color:#D4EAFA;'"

以上这篇Vue 样式切换及三元判断样式关联操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
理解JS绑定事件
Jan 19 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
React中的render何时执行过程
Apr 13 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 #Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 #Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 #Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 #Javascript
javascript中正则表达式语法详解
Aug 07 #Javascript
vue 子组件修改data或调用操作
Aug 07 #Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 #Javascript
You might like
php中防止伪造跨站请求的小招式
2011/09/02 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
Js经典案例的实例代码
2018/05/10 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
node使用request请求的方法
2019/12/20 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
合伙经营协议书范本
2014/04/18 职场文书
团队精神的演讲稿
2014/05/14 职场文书
授权委托书范文
2014/07/31 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
领导欢迎词致辞
2015/01/23 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
营业员岗位职责范本
2015/04/14 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
高一化学教学反思
2016/02/22 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android