初心者が Vue を学ぶための必須スキル: v-if、v-show、v-else、v-else-if 条件付きレンダリングをマスターする

#Vue 初心者に必須のスキル: v-if、v-show、v-else、v-else-if 条件付きレンダリングをマスターする。特定のコード例が必要です<p></p> はじめに:

Vue.js は、インタラクティブなユーザー インターフェイスを構築するための強力なツールと機能を提供する、人気のあるフロントエンド JavaScript フレームワークです。 Vue では、v-if、v-show、v-else、および v-else-if が一般的に使用される条件付きレンダリング命令であり、特定の条件に基づいて要素を表示または非表示にするのに役立ちます。この記事では、これらの手順の使用法を紹介し、具体的なコード例を通じて初心者がこれらのスキルを理解し習得できるように支援します。

1. v-if 命令

v-if 命令は、Vue で最も一般的に使用される条件付きレンダリング命令の 1 つで、指定された式の値に基づいて要素をレンダリングするかどうかを決定します。式が true と評価された場合、要素はレンダリングされ、false と評価された場合、要素は削除されます。

以下は、v-if ディレクティブの使用法を示す簡単な例です。

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

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

上記のコードでは、データ内に isShow 属性を定義し、その初期値 Set を true に設定します。テンプレートでは、v-if ディレクティブを使用して、

要素を表示するかどうかを決定します。 isShow の値が true であるため、要素がレンダリングされます。

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

上記のコードでは、データ内に isShow 属性を定義し、その初期値 Set を true に設定します。テンプレートでは、v-show ディレクティブを使用して、

要素を表示するかどうかを決定します。 isShowの値がtrueなので要素が表示されます。

3. 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> ;要素。 isShow の値が false であるため、v-if 条件が満たされず、v-else ディレクティブの後の

要素が表示されます。

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

要素。 type の値が 'warning' であるため、v-else-if ディレクティブの条件が満たされ、<p></p> 要素「これは警告プロンプトです」が表示されます。 概要:

v-if、v-show、v-else、および v-else-if は、Vue で一般的に使用される条件付きレンダリング命令であり、これを使用して要素を動的に表示または非表示にすることができます。一部の特定のシナリオでは、条件に基づいて使用する命令を選択できます。 Vue を初めて使用する開発者にとって、これらの手順を習得することは非常に重要です。この記事の具体的なコード例を通じて、初心者はこれらの手順をより明確に理解して適用することができ、それによって Vue 開発能力を向上させることができます。 <p></p>

以上が初心者が Vue を学ぶための必須スキル: v-if、v-show、v-else、v-else-if 条件付きレンダリングをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。