Vue の実践的なテクノロジー: データ駆動型の条件付きレンダリングを実装するための v-if、v-show、v-else、v-else-if の詳細な研究

#Vue の実践的なテクノロジ: データ駆動型の条件付きレンダリングを実装するための v-if、v-show、v-else、v-else-if の詳細な研究

はじめに

Vue は、条件付きレンダリング命令 (v-if、v-show、v-else、v-else-if) により、データの状態に基づいて要素を動的に表示または非表示にする強力なフロントエンド フレームワークです。この記事では、これらのディレクティブを詳しく説明し、読者がディレクティブをよりよく理解して使用できるように、具体的なコード例を示します。

v-if ディレクティブ

v-if ディレクティブは、条件に基づいて要素をレンダリングするかどうかを決定するために使用されます。条件が true の場合、要素はレンダリングされます。それ以外の場合、要素はレンダリングされません。以下は具体的な例です。

<template>
  <div>
    <p v-if="isUserLoggedIn">用户已登录</p>
    <p v-else>请先登录</p>
  </div>
</template>

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

上記の例では、

isUserLoggedIn の値に基づいて、「ユーザーはログインしました」と表示するか「ログインしてください」と表示するかを決定します。初め"。 isUserLoggedIn が true の場合、「ユーザーはログインしました」を表示し、それ以外の場合は、「最初にログインしてください」を表示します。

v-show ディレクティブ

v-show ディレクティブは、条件に基づいて要素を表示または非表示にするという点で v-if に似ています。ただし、v-show が実際に DOM 要素を削除または追加するのではなく、要素の CSS プロパティ
display を変更することで要素の表示と非表示を制御する点が異なります。以下は具体的な例です:

<template>
  <div>
    <p v-show="isUserLoggedIn">用户已登录</p>
    <p v-show="!isUserLoggedIn">请先登录</p>
  </div>
</template>

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

上記の例では、

isUserLoggedIn が true の場合は「ユーザーはログインしました」と表示され、isUserLoggedIn が false の場合は「ユーザーはログインしました」と表示されます。 , 「まずログインしてください」と表示されます。要素の display 属性を変更することで、要素の表示と非表示を制御します。

v-else、v-else-if 命令

レンダリングのために複数の条件のうち 1 つを選択する必要がある場合は、v-else、v-else-if 命令を使用できます。 v-else ディレクティブは、v-if または v-else-if 条件が満たされない場合に要素をレンダリングするために使用されます。一方、v-else-if は、前の v-if または v-else-if 条件がいつ満たされるかを判断するために使用されます。 notmet. 次の条件が満たされているかどうか。以下は具体的な例です。

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

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

上記の例では、

score の値を判断することによってさまざまな評価が表示されます。 score が 90 以上の場合は「Excellent」と表示され、score が 60 以上の場合は「Pass」と表示され、それ以外の場合は「Fail」と表示されます。

まとめ

v-if、v-show、v-else、v-else-if 命令を詳細に研究し、特定のコード例と組み合わせることで、これらの命令を使用して目的を達成する方法を学びました。データ駆動型の条件付きレンダリング。実際の開発では、さまざまなニーズやシナリオに応じて、これらの命令を使用してページ要素の表示と非表示を制御することを柔軟に選択できるため、ユーザー エクスペリエンスが向上します。

この記事が、読者が Vue の条件付きレンダリングのスキルをよりよく習得し、フロントエンド開発能力をさらに向上させるのに役立つことを願っています。

以上がVue の実践的なテクノロジー: データ駆動型の条件付きレンダリングを実装するための v-if、v-show、v-else、v-else-if の詳細な研究の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。