vue2.0 changes the style display method based on the status value

Below I will share with you an article on how to change the display style of vue2.0 based on the status value. It has a good reference value and I hope it will be helpful to everyone.

When users perform process operations, they are generally divided into in-progress, not started, and completed. The front-end page must display corresponding status distinctions. What is tested here is background color distinction.

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', '未开始'],
   },//显示状态

By assigning values ​​to status during loop traversal, you can display different background colors in different states.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Example of the function of uploading pictures to the database and displaying them on the page implemented by vue

Solution using vue. The problem of invalidity after js routing

How to perfectly parse data in js

The above is the detailed content of vue2.0 changes the style display method based on the status value. For more information, please follow other related articles on the PHP Chinese website!