Analyse des bedingten Renderings in Vue (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Analyse des bedingten Renderns in Vue (mit Code). Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Bedingte Anweisungen

Die sogenannten bedingten Anweisungen beziehen sich darauf, welcher Teil des Codes ausgeführt wird, wenn eine bestimmte Bedingung erfüllt ist, und welcher Teil des bedingten Codes ausgeführt wird, wenn die Bedingung ist nicht erfüllt. Es gibt drei bedingte Vue-Anweisungen: v-if, v-else-if und v-else. Die bedingte Darstellung von v-if wird verwendet, um anzugeben, ob ein Element entfernt oder eingefügt wird, und das Element wird basierend auf wahr oder falsch gerendert Bedingung des Ausdruckswerts.

v-if-Beispiel

Methode 1 verwendet v-if, um Beschriftungen anzuzeigen. Wenn der Initialisierungswert wahr ist, wird die erste Beschriftung angezeigt false Wenn 🎜> Nutzungsbedingungen:

muss unmittelbar von einem Element mit

oder gefolgt werden und wird verwendet, wenn im Projekt mehrere Beurteilungsbedingungen vorhanden sind.

Verwendungsmethode 1: Verwenden Sie eine Zeichenfolge, um die Beschriftung anzuzeigen. Wenn der Initialisierungswert der Beurteilungsbedingung Zeichenfolge 1 ist, wird die if-Beschriftung angezeigt, wenn der Initialisierungswert der Beurteilung ist Bedingung ist nicht Zeichenfolge 1. Dann wird die V-else-if-Bedingungsbezeichnung entsprechend der Beurteilungsbedingung angezeigt. Das Beispiel lautet wie folgt:

<template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
  <span v-if="isshow">ishow为true我将首次展现</span>
<span v-if="!isshow">ishow为false我将首次展现</span>
  </div>
</template>

<script>
  export default {
        name: &#39;v-if&#39;,
      data () {
          return {
            title: &#39;条件渲染&#39;,
            isshow: true
          }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

v-else-if<br>

v-else-ifv-ifv-else-if

Verwendungsmethode 2: Verwenden Sie den numerischen Typ, um die Beschriftung anzuzeigen.

Wenn der Initialisierungswert der Beurteilungsbedingung der numerische Typ 1 ist, wird das if-Tag angezeigt Wenn der Initialisierungswert der Beurteilungsbedingung nicht vom numerischen Typ 1 ist, wird er entsprechend der Beurteilungsbedingung v-else-if angezeigt. Beispiele sind wie folgt:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===&#39;1&#39;">ishow为字符串类型1我将首次展现</span>
      <span v-else-if="isshow===&#39;2&#39;">(elseif)否则ishow为字符串类型2我将首次展现</span>
      <span v-else-if="isshow===&#39;3&#39;">(elseif)否则ishow为字符串类型3我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;2&#39;
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

v-else-Beispiele

Verwendungsbedingungen:

-Elemente müssen auf ein Element mit oder

folgen, sonst wird es nicht erkannt.

Verwendungsmethode eins: if-else-Typ, Initialisierungs-Bool-Wert verwenden, um Beschriftung anzuzeigen:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
      <span v-else-if="isshow===2">(elseif)否则ishow为数字类型2我将首次展现</span>
      <span v-else-if="isshow===3">(elseif)否则ishow为数字类型3我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: 3
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

v-elsev-ifv-else-ifVerwendungsmethode zwei: Wenn der Initialisierungswert Zeichenfolge 1 ist, wird die Zeichenfolge angezeigt, wenn der Initialisierungswert nicht Zeichenfolge 1 ist Beschriftung, Beispiele sind wie folgt:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow">ishow为true我将首次展现</span>
      <span v-if="!isshow">ishow为false我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
        name: &#39;v-if&#39;,
      data () {
          return {
            title: &#39;条件渲染&#39;,
            isshow: false
          }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Verwendungsmethode drei: if-else-Typ, verwenden Sie den numerischen Typ, um die Beschriftung anzuzeigen, wenn die Wenn der Initialisierungswert vom numerischen Typ 1 ist, wird das if-Tag angezeigt. Wenn der Initialisierungswert kein numerischer Typ 1 ist, wird das else-Tag angezeigt. Das Beispiel lautet wie folgt:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===&#39;1&#39;">ishow为字符串1我将首次展现</span>
      <span v-else>ishow不为字符串1我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;1&#39;
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Verwendungsmethode 4: if-elseif- else-Typ. Wenn weder if- noch elseif-Bedingungen erfüllt sind, wird die else-Beschriftung wie folgt angezeigt:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <span v-if="isshow===1">ishow为数字类型1我将首次展现</span>
      <span v-else>ishow不为数字类型1我将首次展现</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: &#39;v-if&#39;,
    data () {
      return {
        title: &#39;条件渲染&#39;,
        isshow: &#39;1&#39;
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Zusammenfassung: Komplexe Programme bestehen alle aus einfachen Urteilen. Sie werden durch Ändern der Kombination von Bedingungen gebildet. Das Wichtigste ist, die Urteilsbedingungen flexibel im Programm zu verwenden.

Verwandte Empfehlungen:

Analyse der V-Modell-Direktive in Vue (mit Code)

Das obige ist der detaillierte Inhalt vonAnalyse des bedingten Renderings in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!