Vue で v-show と v-if を使用して動的なページ レンダリングを実現する方法

Vue は、動的 Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 v-show と v-if は両方とも、ビューを動的にレンダリングするための Vue の命令です。これらは、DOM 要素が表示されない場合や非表示になっている場合に、ページをより適切に制御するのに役立ちます。この記事では、Vue で v-show 命令と v-if 命令を使用して動的なページ レンダリングを実現する方法を詳しく説明します。

Vue の v-show ディレクティブ

v-show は、式の値に基づいて要素を動的に表示または非表示にする Vue のディレクティブです。 v-show では、要素は常に DOM でレンダリングされ、CSS のみが表示または非表示の制御に使用されます。

v-show ディレクティブは次の方法で使用できます:

<template>
  <div>
    <h1 id="Dynamic-Title">Dynamic Title</h1>

    <button @click="toggleTitle">Toggle Title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true
    }
  },
  methods: {
    toggleTitle() {
      this.showTitle = !this.showTitle
    }
  }
}
</script>

上記のコードでは、タイトルの表示を切り替えるボタンを作成しました。 showTitle 変数にバインドすると、その値が true の場合にのみタイトルが表示されます。ボタンをクリックすると、toggleTitle メソッドの showTitle 値が false に切り替わり、DOM が再レンダリングされます。この場合、タイトルはブラウザ上から消えます。

Vue の v-if ディレクティブ

v-if ディレクティブは、指定された条件が true の場合にのみ DOM 要素をレンダリングするために使用されます。 v-show とは異なり、v-if は DOM 要素を動的に追加/削除します。

v-if ディレクティブは次の方法で使用できます:

<template>
  <div>
    <h2 id="Welcome-username">Welcome, {{ username }}!</h2>

    <button @click="login">Log In</button>

    <button @click="logout">Log Out</button>
  </div>
</template>

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

  methods: {
    login() {
      this.isLoggedIn = true
      this.username = 'Your Username'
    },

    logout() {
      this.isLoggedIn = false
      this.username = ''
    }
  }
}
</script>

上記のコードでは、v-if ディレクティブを使用して、ログインしているかどうかを確認します。すでにログインしている場合は、DOM にウェルカム メッセージを表示します。ログインしていない場合は、ウェルカム メッセージを非表示にします。ログイン ボタンまたはログアウト ボタンをクリックすると、ログイン メソッドとログアウト メソッドが呼び出され、これらのメソッドがデータと DOM を更新します。

Vue における v-show と v-if の組み合わせ

多くの場合、特定の領域を動的にレンダリングし、さまざまな状況に応じてさまざまなコンテンツを表示/非表示にする必要があります。 v-show と v-if を組み合わせて、この種の動的レンダリングを実現できます。

<template>
  <div>
    <div v-if="isActivated">
      <h3 id="Welcome-name">Welcome, {{ name }}!</h3>
    </div>
    <div v-else>
      <h3 id="Please-log-in-to-access-this-page">Please log in to access this page.</h3>
    </div>

    <button @click="toggleActivation">Activate/Deactivate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActivated: false,
      name: 'Your Username'
    }
  },

  methods: {
    toggleActivation() {
      this.isActivated = !this.isActivated
    }
  }
}
</script>

上の例では、v-if ディレクティブを使用して、アクティブ化されているかどうかを確認し、さまざまなビューを表示します。 isActivated が true の場合、ウェルカム メッセージを DOM にレンダリングします。そうでない場合は、ユーザーを認証するためのメッセージを表示します。 v-show ディレクティブを使用して、一部のコンテンツを動的に表示します。

ボタンのあるコンポーネントでは、toggleActivation を使用して isActivated 値を切り替え、それによって DOM ビューのレンダリングを変更できます。 v-show と v-if を一緒に使用すると、ページをより適切に制御し、より動的で柔軟にすることができます。

概要

v-show と v-if は Vue の 2 つの便利な命令で、DOM 要素の表示と非表示を制御するために使用されます。 v-show は単に CSS の表示/非表示を制御するために使用されますが、v-if は DOM 要素を動的に追加/削除します。これら 2 つのディレクティブを一緒に使用すると、DOM の動的レンダリングをより適切に制御できるようになります。 Vue の動的ページ レンダリングを実装する場合、状況に応じて v-show と v-if、およびそれらの組み合わせを使用するかどうかを決定する必要があります。

以上がVue で v-show と v-if を使用して動的なページ レンダリングを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。