v-show ディレクティブを使用して Vue で要素を表示および非表示にする方法

Vue は、動的な最新の Web アプリケーションを構築できる人気の JavaScript フレームワークです。 Vue には、ビュー内にインタラクティブな要素を作成するための、v-show ディレクティブを含む多数のディレクティブが用意されています。この記事では、v-show ディレクティブを使用して Vue で要素を表示および非表示にする方法を説明します。

v-show ディレクティブは、特定の条件に基づいて要素を表示または非表示にするために使用されるディレクティブです。 v-show ディレクティブは、div、span、p、button などの任意の HTML 要素に付加できます。ディレクティブの値が true の場合、要素は表示され、それ以外の場合、要素は非表示になります。以下は、v-show ディレクティブを使用して要素を表示および非表示にする簡単な例です。

<template>
  <div>
    <button @click="toggleText">Toggle Text</button>
    <p v-show="showText">Hello World!</p>
  </div>
</template>

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

この例では、ボタンと p タグを含むコンポーネントを作成します。 v-show ディレクティブを使用して、p タグを showText の値にバインドします。 showText のデフォルト値は true なので、コンポーネントが初期化されると、p タグが表示されます。ユーザーがボタンをクリックすると、showText の値を変更して p ラベルを表示または非表示にする toggleText メソッドを呼び出します。

v-show ディレクティブを使用すると、計算されたプロパティを組み合わせて、より複雑な条件付き制御を実現できます。たとえば、次の例では、計算プロパティを使用して要素を表示または非表示にする方法を示します。

<template>
  <div>
    <input type="checkbox" v-model="isChecked"> Show Text
    <p v-show="shouldShowText">Hello World!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  computed: {
    shouldShowText() {
      return this.isChecked
    }
  }
}
</script>

この例では、チェックボックスと p タグを含むコンポーネントを作成します。 v-model ディレクティブを使用して、チェックボックスを isChecked の値にバインドします。計算プロパティ shouldShowText を使用して、p タグをチェックボックスが選択されているかどうかの値にバインドします。 shouldShowText は、チェックボックスがチェックされている場合は true を返して p タグを表示し、それ以外の場合は false を返して p タグを非表示にします。

概要

v-show ディレクティブは、Vue で要素を表示および非表示にする効果的な方法です。特定の条件に基づいて要素を表示または非表示にすることが簡単にできます。単純な条件制御であっても、複雑な計算であっても、v-show ディレクティブは、対話型 Vue アプリケーションの一般的なニーズを実装するために使用できる非常に実用的なツールです。

以上がv-show ディレクティブを使用して Vue で要素を表示および非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。