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 读书笔记索引贴
Jan 11 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 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基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
深入浅析Python字符编码
2015/11/12 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
公司捐款倡议书
2014/05/14 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
如何写新闻稿
2015/07/18 职场文书