Vue 条件付きレンダリングの高度なスキル: v-if、v-show、v-else、v-else-if をマスターして、複雑な論理的判断を実装する

Vue は、多くの柔軟な機能を提供する人気のフロントエンド フレームワークであり、その中でも条件付きレンダリングは開発でよく使用される機能の 1 つです。 Vue では、v-if、v-show、v-else、v-else-if などの命令を使用して、複雑な論理判断や条件付きレンダリングを実装できます。この記事では、これらのディレクティブの使用方法を説明し、いくつかの具体的なコード例を示します。

v-if 命令は、最も一般的に使用される条件付きレンダリング命令です。v-if 属性を DOM 要素に追加すると、条件に基づいて要素をレンダリングするかどうかを決定できます。 v-if ディレクティブは、式が true か false に基づいて DOM 要素を追加または削除します。たとえば、ユーザーがログインしているかどうかに基づいて、異なるコンテンツを表示できます。

<template>
  <div>
    <div v-if="isLoggedin">
      欢迎回来，{{ username }}！
    </div>
    <div v-else>
      请登录后查看内容。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedin: false,
      username: 'John'
    }
  }
}
</script>

上記のコードでは、isLoggedin の値に基づいて、ウェルカム メッセージを表示するかログイン プロンプトを表示するかを決定できます。 isLoggedin が true の場合はウェルカム メッセージが表示され、それ以外の場合はログイン プロンプトが表示されます。

v-show 命令は v-if 命令に似ています。条件に基づいて要素の表示と非表示を制御することもできます。ただし、DOM 構造は削除されません。DOM 構造の可視性を制御するだけです。要素の表示属性を設定して要素を表示します。 v-show ディレクティブを使用する場合、要素は常に DOM 内に存在し、表示属性は表示するかどうかを決定する条件に基づいてのみ設定されます。以下に例を示します。

<template>
  <div>
    <button @click="toggle">切换</button>
    <div v-show="isShow">
      这是一个隐藏的元素。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

上記のコードでは、ボタンをクリックして isShow の値を切り替えることで、要素の表示と非表示を制御します。

v-if および v-show に加えて、Vue は複数条件のレンダリング状況を処理するための v-else および v-else-if 命令も提供します。 v-else は v-if と組み合わせて使用​​されます。つまり、前の v-if 条件が true でない場合、v-else の内容が実行されます。 v-else-if は複数の条件を切り替えるために使用され、その使用法は v-else と似ています。以下は、複数条件のレンダリングの例です。

<template>
  <div>
    <div v-if="score >= 90">
      优秀
    </div>
    <div v-else-if="score >= 60">
      及格
    </div>
    <div v-else>
      不及格
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 80
    }
  }
}
</script>

上記のコードでは、スコアの値に基づいて、生徒の成績レベルを判断できます。スコアが90以上の場合は「優」、スコアが60以上の場合は「合格」、それ以外の場合は「不合格」が表示されます。

v-if、v-show、v-else、v-else-if の条件付き描画命令を使いこなすことで、Vue 開発におけるさまざまな複雑な論理判断要件に柔軟に対応できます。上記のコード例は、これらの命令の使用方法をより深く理解するのに役立ちます。この記事が皆様の Vue の条件付きレンダリングの学習に役立つことを願っています。

以上がVue 条件付きレンダリングの高度なスキル: v-if、v-show、v-else、v-else-if をマスターして、複雑な論理的判断を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。