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 相关文章推荐
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
javascript常用的方法分享
Jul 01 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
vue中关闭eslint的方法分析
Aug 04 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
python 测试实现方法
2008/12/24 Python
python 输出一个两行字符的变量
2009/02/05 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
医学院学生求职简历的自我评价
2013/10/24 职场文书
行政人员工作职责
2013/12/05 职场文书
初中音乐教学反思
2014/01/12 职场文书
报告会主持词
2014/04/02 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
军训通讯稿范文
2015/07/18 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
mysql自增长id用完了该怎么办
2022/02/12 MySQL