When users perform process operations, they are generally divided into progress. Before starting and completed, the front-end page must be displayed accordingly. Here we test the background color distinction.
demo：
<span class="contract-span" :class="statusText[][0]">{{statusText[][1]}}</span>
statusText: {
0: ['span-delay', 'in progress'],
1: ['span-finish', 'Completed'],
2: ['span-rough', 'Not started'],
},//Display status
Assigning status in loop traversal can enable different background colors to be displayed under different states.
The above method of changing styles based on status values in vue2.0 is the entire content shared by the editor. I hope it can give you a reference and I hope you can support me more.