vue2.0 ändert die Stilanzeigemethode basierend auf dem Statuswert

Im Folgenden werde ich einen Artikel darüber teilen, wie Sie den Anzeigestil von vue2.0 basierend auf dem Statuswert ändern können. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Wenn Benutzer Prozessvorgänge ausführen, werden diese im Allgemeinen in „in Bearbeitung“, „noch nicht gestartet“ und „abgeschlossen“ unterteilt. Auf der Startseite müssen entsprechende Statusunterschiede angezeigt werden. Was hier getestet wird, ist die Unterscheidung der Hintergrundfarbe.

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

Durch Zuweisen von Werten zum Status während des Schleifendurchlaufs können Sie unterschiedliche Hintergrundfarben in verschiedenen Zuständen anzeigen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Beispiel für die von vue implementierte Funktion zum Hochladen von Bildern in die Datenbank und Anzeigen auf der Seite

Mit Vue gelöst.

Wie man Daten in JS perfekt analysiert

Das obige ist der detaillierte Inhalt vonvue2.0 ändert die Stilanzeigemethode basierend auf dem Statuswert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!