vue2.0 根据状态值进行样式的改变展示方法


Posted in Javascript onMarch 13, 2018

用户在进行流程操作的时候,一般分为进行中,未开始,已完成,前端页面就要进行相应的状态区分展示。这里测试的是背景颜色区分。

demo:

<span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span>
statusText: {
    0: ['span-delay', '进行中'],
    1: ['span-finish', '已完成'],
    2: ['span-rough', '未开始'],
   },//显示状态

在循环遍历中进行对status赋值,就可以实现不同状态下,显示不同的背景色。

以上这篇vue2.0 根据状态值进行样式的改变展示方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 #Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 #Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 #Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 #Javascript
setTimeout时间设置为0详细解析
Mar 13 #Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 #Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 #Javascript
You might like
php 在线打包_支持子目录
2008/06/28 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
JS动画效果代码3
2008/04/03 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jcrop基本参数一览
2013/07/16 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
详细介绍Python中的偏函数
2015/04/27 Python
Python中动态创建类实例的方法
2017/03/24 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
竞选班干部演讲稿600字
2014/08/20 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android