v-show を使用して Vue で要素の表示と非表示を制御する方法

Vue は、動的で応答性の高い単一ページ Web アプリケーションを構築するために広く使用されている人気のある JavaScript フレームワークです。このうち、v-show 命令は Vue でよく使われる命令で、要素の表示と非表示を制御するために使用できます。この記事では、Vue で v-show ディレクティブを使用する方法を紹介します。

1. コマンドの使用法
v-show コマンドの使用法は非常に簡単です。構文は次のとおりです:

v-show="expression"

ここで、expression は JavaScript 式です。式の結果が true の場合は要素が表示され、If の場合は要素が表示されます。式が false と評価されると、要素は非表示になります。

2. 例の説明
ボタンと段落のある以下の例を見てみましょう。ボタンをクリックすると、段落の表示状態が変わります。

<template>
  <div>
    <button @click="toggleShow">点击切换</button>
    <p v-show="show">这里是段落文本</p>
  </div>
</template>

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

上記のコードでは、data 属性を通じて show 変数を定義し、それを true に初期化しました。テンプレートでは、v-show ディレクティブを使用して段落を show 変数にバインドします。 toggleShow メソッドでは、show 変数を反転するだけで段落の表示状態を切り替えます。

ご覧のとおり、要素の表示と非表示を制御するには v-show を使用すると、ブール型変数に命令をバインドするだけで非常に便利です。 v-if ディレクティブとは異なり、v-show は要素が切り替わったときに要素を破棄したり再作成したりしないため、v-if よりもパフォーマンスが高くなります。

3. 命令に関する注意
v-show を使用する場合は、次の問題に注意する必要があります:

1. v-show は、 div、p、span などの表示属性。 v-show ディレクティブをカスタム コンポーネントにバインドする場合は、コンポーネントに display 属性があることを確認してください。
2. 複数の要素を切り替える必要がある場合は、v-if ディレクティブを使用することをお勧めします。 v-show は要素を破棄して再作成しないため、要素の表示状態を頻繁に切り替える必要がある場合、パフォーマンスに一定の影響を与えます。
3. 要素が配置されているページスペースを占有せずに要素を非表示にしたい場合は、v-if ディレクティブの使用を検討してください。

4. 概要
v-show 命令は、要素の表示と非表示を制御するために Vue で使用される一般的な命令です。 v-if 命令と比較して、v-show は要素の表示状態を頻繁に切り替える必要があるシナリオに適しています。 v-show を使用する場合、バインドされた要素には表示属性が必要であることに注意する必要があります。また、複数の要素間で切り替える必要がある場合は、v-if ディレクティブの使用を検討する必要があります。

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