Grundlegende Fähigkeiten für Anfänger zum Erlernen von Vue: Beherrschen Sie das bedingte Rendern von v-if, v-show, v-else und v-else-if

Grundlegende Fähigkeiten für Vue-Anfänger: Beherrschen Sie das bedingte Rendern von v-if, v-show, v-else, v-else-if, spezifische Codebeispiele sind erforderlich

Einführung:
Vue.js ist ein beliebtes Front- End-JavaScript-Framework, das leistungsstarke Tools und Funktionen zum Erstellen interaktiver Benutzeroberflächen bereitstellt. In Vue sind v-if, v-show, v-else und v-else-if häufig verwendete bedingte Rendering-Anweisungen, die dabei helfen, Elemente basierend auf bestimmten Bedingungen ein- oder auszublenden. In diesem Artikel stellen wir die Verwendung dieser Anweisungen vor und helfen Anfängern, diese Fähigkeiten anhand spezifischer Codebeispiele zu verstehen und zu beherrschen.

1. v-if-Anweisung
Die v-if-Anweisung ist eine der am häufigsten verwendeten bedingten Rendering-Anweisungen in Vue. Sie bestimmt, ob ein Element basierend auf dem Wert eines bestimmten Ausdrucks gerendert werden soll. Wenn der Ausdruck „true“ ergibt, wird das Element gerendert; wenn er „false“ ergibt, wird das Element entfernt.

Hier ist ein einfaches Beispiel, das die Verwendung der v-if-Direktive zeigt:

<template>
  <div>
    <p v-if="isShow">这是一个v-if指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  }
}
</script>

Im obigen Code haben wir ein isShow-Attribut in Daten definiert und seinen Anfangswert auf true gesetzt. In der Vorlage verwenden wir die v-if-Direktive, um zu bestimmen, ob das Element <p></p> angezeigt werden soll. Da der Wert von isShow true ist, wird das Element gerendert. <p></p>元素。由于isShow的值为true，所以该元素会被渲染。

二、v-show指令
v-show指令与v-if指令类似，也是根据给定的表达式的值来决定元素是否显示。不同的是，v-show指令会保留元素的DOM结构，只是通过CSS样式来控制元素的显示和隐藏。

下面是一个简单的示例，展示了v-show指令的用法：

<template>
  <div>
    <p v-show="isShow">这是一个v-show指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  }
}
</script>

在上面的代码中，我们在data中定义了一个isShow属性，并将其初始值设置为true。在模板中，我们使用v-show指令来决定是否显示<p></p>元素。由于isShow的值为true，所以该元素会被显示。

三、v-else指令
v-else指令用于在上一个带v-if或v-else-if的元素后面添加一个“else”条件块。它没有表达式，只需在v-else中使用，表示不满足前面的条件时，渲染该元素。

下面是一个简单的示例，演示了v-else指令的用法：

<template>
  <div>
    <p v-if="isShow">这是一个v-if指令的示例</p>
    <p v-else>这是一个v-else指令的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

在上面的代码中，我们根据isShow的值来决定显示哪个<p></p>元素。由于isShow的值为false，所以v-if条件不满足，将显示v-else指令后面的<p></p>元素。

四、v-else-if指令
v-else-if指令用于在v-if或v-else-if指令后面添加一个“else if”条件块。它接收一个表达式，并根据该表达式的值来判断是否渲染该元素。

下面是一个简单的示例，演示了v-else-if指令的用法：

<template>
  <div>
    <p v-if="type === 'info'">这是一个信息提示</p>
    <p v-else-if="type === 'warning'">这是一个警告提示</p>
    <p v-else-if="type === 'error'">这是一个错误提示</p>
    <p v-else>这是一个未知提示</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'warning'
    }
  }
}
</script>

在上面的代码中，我们根据type的值来判断显示哪个<p></p>元素。由于type的值为'warning'，所以v-else-if指令中的条件被满足，将显示“这是一个警告提示”这个<p></p>

2. v-show-Anweisung

Die v-show-Anweisung ähnelt der v-if-Anweisung. Sie bestimmt auch, ob das Element basierend auf dem Wert des angegebenen Ausdrucks angezeigt wird. Der Unterschied besteht darin, dass die v-show-Anweisung die DOM-Struktur des Elements beibehält und das Anzeigen und Ausblenden des Elements nur über CSS-Stile steuert.

Hier ist ein einfaches Beispiel, das die Verwendung der v-show-Direktive zeigt: 🎜rrreee🎜Im obigen Code definieren wir ein isShow-Attribut in Daten und setzen seinen Anfangswert auf true. In der Vorlage verwenden wir die v-show-Direktive, um zu entscheiden, ob das Element <p></p> angezeigt werden soll. Da der Wert von isShow true ist, wird das Element angezeigt. 🎜🎜3. v-else-Anweisung 🎜 Die v-else-Anweisung wird verwendet, um einen „else“-Bedingungsblock nach dem vorherigen Element mit v-if oder v-else-if hinzuzufügen. Es hat keinen Ausdruck und kann nur in v-else verwendet werden, um anzugeben, dass das Element gerendert wird, wenn die vorherigen Bedingungen nicht erfüllt sind. 🎜🎜Das Folgende ist ein einfaches Beispiel, das die Verwendung der v-else-Direktive demonstriert: 🎜rrreee🎜Im obigen Code entscheiden wir basierend auf dem Wert von isShow, welches <p></p>-Element angezeigt werden soll. Da der Wert von isShow falsch ist, ist die v-if-Bedingung nicht erfüllt und das <p></p>-Element, das der v-else-Direktive folgt, wird angezeigt. 🎜🎜4. v-else-if-Anweisung 🎜 Die v-else-if-Anweisung wird verwendet, um einen „else if“-Bedingungsblock nach der v-if- oder v-else-if-Anweisung hinzuzufügen. Es empfängt einen Ausdruck und bestimmt anhand des Werts des Ausdrucks, ob das Element gerendert werden soll. 🎜🎜Das Folgende ist ein einfaches Beispiel, das die Verwendung der v-else-if-Direktive demonstriert: 🎜rrreee🎜Im obigen Code bestimmen wir basierend auf dem Wert, welches <p></p>-Element angezeigt werden soll vom Typ . Da der Wert des Typs „Warnung“ ist, ist die Bedingung in der v-else-if-Direktive erfüllt und das <p></p>-Element „Dies ist eine Warnmeldung“ wird angezeigt. 🎜🎜Zusammenfassung: 🎜v-if, v-show, v-else und v-else-if sind in Vue häufig verwendete bedingte Rendering-Anweisungen, mit denen wir Elemente dynamisch ein- oder ausblenden können. In einigen spezifischen Szenarien können wir basierend auf den Bedingungen auswählen, welche Anweisung verwendet werden soll. Das Beherrschen dieser Anweisungen ist für Entwickler, die neu bei Vue sind, sehr wichtig. Durch die spezifischen Codebeispiele in diesem Artikel können Anfänger diese Anweisungen besser verstehen und anwenden und so ihre Vue-Entwicklungsfähigkeiten verbessern. 🎜

Das obige ist der detaillierte Inhalt vonGrundlegende Fähigkeiten für Anfänger zum Erlernen von Vue: Beherrschen Sie das bedingte Rendern von v-if, v-show, v-else und v-else-if. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!