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:
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

In macOS Sonoma, widgets don't have to be hidden off-screen or forgotten in the Notification Center panel like they did in previous versions of Apple's macOS. Instead, they can be placed directly on your Mac’s desktop – they’re also interactive. When not in use, macOS desktop widgets fade into the background in a monochrome style, reducing distractions and allowing you to focus on the task at hand in the active application or window. However, when you click on the desktop, they return to full color. If you prefer a drab look and want to retain that aspect of uniformity on your desktop, there's a way to make it permanent. The following steps demonstrate how it is done. Open the System Settings app

Guide to solving misaligned WordPress web pages In WordPress website development, sometimes we encounter web page elements that are misaligned. This may be due to screen sizes on different devices, browser compatibility, or improper CSS style settings. To solve this misalignment, we need to carefully analyze the problem, find possible causes, and debug and repair it step by step. This article will share some common WordPress web page misalignment problems and corresponding solutions, and provide specific code examples to help develop

CSS web page background image design: Create various background image styles and effects, specific code examples are required Summary: In web design, background images are an important visual element, which can effectively enhance the attractiveness and readability of the page. This article will introduce some common CSS background image design styles and effects, and provide corresponding code examples. Readers can select and apply these background image styles and effects according to their own needs and preferences to achieve better visual effects and user experience. Keywords: CSS, background image, design style, effect, code representation

Python is a versatile programming language that is popular in the field of data analysis and machine learning. Its simplicity, readability, and rich library make it ideal for handling complex data tasks. One such powerful application is RFM analysis, a technique used in marketing to segment customers based on their purchasing behavior. In this tutorial, we will guide you through the process of implementing RFM analysis using Python. We will start by explaining the concept of RFM analysis and its importance in marketing. We will then gradually dive into the practical aspects of RFM analysis using Python. In the next part of the article, we will demonstrate how to calculate an RFM score for each customer using Python, taking into account the values for recency, frequency, and

Use the :nth-last-child(2) pseudo-class selector to select the style of the penultimate child element. Specific code examples are required. In CSS, the pseudo-class selector is a very powerful tool that can be used to select the document tree. specific elements. One of them is the :nth-last-child(2) pseudo-class selector, which selects the second-to-last child element and applies styles to it. First, let's create a sample HTML document so that we can use this pseudo-class selector in it. by

Recently, "Black Myth: Wukong" has attracted huge attention around the world. The number of people online at the same time on each platform has reached a new high. This game has achieved great commercial success on multiple platforms. The Xbox version of "Black Myth: Wukong" has been postponed. Although "Black Myth: Wukong" has been released on PC and PS5 platforms, there has been no definite news about its Xbox version. It is understood that the official has confirmed that "Black Myth: Wukong" will be launched on the Xbox platform. However, the specific launch date has not yet been announced. It was recently reported that the Xbox version's delay was due to technical issues. According to a relevant blogger, he learned from communications with developers and "Xbox insiders" during Gamescom that the Xbox version of "Black Myth: Wukong" exists.

CSS text effects: Adding various special effects and styles to text requires specific code examples 1. Introduction In web design, text is an indispensable part. By adding special effects and styles to the text, you can make the page more lively and interesting and improve the user's reading experience. This article will introduce some common CSS text effects and provide corresponding code examples for readers' reference and learning. 2. Text color Text color is one of the most basic text effects. By setting the color property, you can change the color of the text. Here is an example

Using the :root pseudo-class selector to select the style of the root element of the document requires specific code examples. In CSS, we can use the :root pseudo-class selector to select the root element of the document and specify a specific style for it. The :root pseudo-class selector is equivalent to selecting html elements in most cases, but when a namespace exists in the document, the :root pseudo-class selector will select the root element of the default namespace. Here is a concrete code example that shows how to use the :root pseudo-class selector to select the root element of the document.
