vue2.0 根据状态值进行样式的改变展示方法
更新时间：2018年03月13日 15:11:26 作者：yyjourney
下面小编就为大家分享一篇vue2.0 根据状态值进行样式的改变展示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
用户在进行流程操作的时候，一般分为进行中，未开始，已完成，前端页面就要进行相应的状态区分展示。这里测试的是背景颜色区分。
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 根据状态值进行样式的改变展示方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-resource + json-server模拟数据的方法
本篇文章主要介绍了vue-resource + json-server模拟数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了关于json-bigint处理大数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
关于Element-UI Table 表格指定列添加点击事件
这篇文章主要介绍了关于Element-UI Table 表格指定列添加点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue3实现封装时间计算-日期倒计时组件-还有XX天&第XX天
这篇文章主要介绍了vue3实现封装时间计算-日期倒计时组件-还有XX天&第XX天,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了通过vue实现网页截图的功能，有兴趣的童鞋可以了解一下2021-11-11
这篇文章主要介绍了vue.js+ElementUI实现进度条提示密码强度效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定。这篇文章主要介绍了Vue.js中v-bind v-model的使用和区别,需要的朋友可以参考下2018-12-12
Vue中使用 setTimeout() setInterval()函数的问题
这篇文章主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Vue github用户搜索案例分享，文章基于Vue的相关资料展开对主题的详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了Vue请求后端接口导出excel表格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论