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 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 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实现的随机广告显示代码
2007/06/14 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
jQuery的学习步骤
2011/02/23 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Python易忽视知识点小结
2015/05/25 Python
Python可变参数函数用法实例
2015/07/07 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
如何通过python实现人脸识别验证
2020/01/17 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
2014植树节活动总结
2014/03/11 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
教代会开幕词
2015/01/28 职场文书
困难补助申请报告
2015/05/19 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android