主页 / 网络编程 /

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

网络编程 2021-07-04 17:33www.168986.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家分享一篇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 根据状态值进行样式的改变展示方法就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：vue2.0 实现页面导航提示引导的方法 下一篇：使用Vuex实现一个笔记应用的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by