Vue での条件付きレンダリングの分析 (コード付き)

この記事では、Vue での条件付きレンダリングの分析を紹介します (コード付き)。困っている友人に役立つと幸いです。

条件付き命令

いわゆる条件付き命令とは、特定の条件が満たされた場合にコードのどの部分が実行され、条件が満たされない場合に条件付きコードのどの部分が実行されるかを指します。 vue の条件付き命令には、v-if、v-else-if、v-else の 3 つがあります。v-if 条件付きレンダリングは、要素が削除されるか挿入されるかを示すために使用され、要素は true または false に基づいてレンダリングされます。式の値の条件。

v-if の例

方法 1 では、v-if を使用してラベルを表示します。初期化値が true の場合、最初のラベルが表示されます。初期化値が false の場合、2 番目のラベルが表示されます。

v-else-if<img src="https://img.php.cn/upload/article/000/000/009/b8629e2fc418f3bb431019eb455df7a4-3.png" alt="">

v-else-if<br>

使用条件：v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后，当项目中有多个判断条件时使用。

使用方式一：使用字符串显示标签，当判断条件初始化值为字符串1时，则显示if标签，当判断条件初始化值不为字符串1时，则根据判断条件显示v-else-if条件标签，示例如下：

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

使用方式二：使用数字类型显示标签，当判断条件初始化值为数字类型1时，则显示if标签，当判断条件初始化值不为数字类型1时，则根据判断条件显示v-else-if条件标签，示例如下：

<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示例

使用条件：v-else 元素必须紧跟在带 v-if 或者 v-else-if使用条件: v-else-if の直後に v- を続ける必要がありますif または v-else-if 要素の後に、プロジェクト内に複数の判定条件がある場合に使用されます。

使用方法1: 文字列を使用してラベルを表示します。判定条件の初期値が文字列1の場合、ifラベルが表示されます。判定条件の初期値が文字列1以外の場合、v-elseが表示されます。 -if コンディショナルタグの場合、例は以下の通りです。 -6.png" alt=""/>

使い方２：数値型を使用する 判定条件の初期値が数値型１の場合は、ラベルが表示されます。判定条件の初期値が数値型１でない場合は、ifラベルが表示されます。 v-else-if 条件ラベルは判定条件に応じて表示されます。 例は以下の通りです。 -10.png" alt=""/>

v-else の例

使用条件: v-else 要素は v-ifを持つ要素の直後にある必要があります> または v-else-if それ以外の場合は識別されません。

使用法 1: if-else 型、初期化ブール値を使用してラベルを表示します:

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

使用法 2: if-else 型、初期化時に文字列を使用してラベルを表示しますvalue が 1 の場合は if タグが表示され、初期化値が 1 以外の場合は else タグが表示されます。

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

使用方法 3: if-else型の場合、ラベルを表示するには数値型を使用します。初期化値が数値型 1 の場合、if タグが表示されます。初期化値が数値型 1 でない場合、else タグが表示されます。 例は次のとおりです。
使用方法 4: if-elseif-else 型、 when if 条件も elseif 条件も満たさない場合、else ラベルが表示されます。 例は次のとおりです。

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

🎜🎜🎜 概要: 複雑なプログラムはシンプルな判定条件の組み合わせで構成することが重要です。 🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜Vue での v-model ディレクティブの分析 (コード付き) 🎜🎜🎜🎜

以上がVue での条件付きレンダリングの分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。