Vue ドキュメントの v-if 条件ディレクティブの使用方法

Vue は、特別なユーザー インターフェイスを構築するためのオープン ソースの JavaScript フレームワークです。 Vue ドキュメントの v-if 条件ディレクティブは、Vue 要素をレンダリングするかどうかを制御する方法です。 v-if ディレクティブを使用すると、ページ内のデータに基づいて要素をレンダリングするかどうかを制御できます。

v-if ディレクティブはブール式を受け入れることができます。式の結果が true の場合、Vue は要素をレンダリングします。それ以外の場合、Vue は要素をページにレンダリングしません。 v-if 命令の構文は次のとおりです。

<element v-if="expression"></element>

expression は JavaScript 式であり、変数、関数、または計算を指定できます。

以下は v-if ディレクティブの例です:

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

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

上の例では、show 変数の値が true の場合、Vue は p 要素をレンダリングし、「Here」と表示します。はテキストの内容です。" ;show 変数の値が false の場合、Vue は p 要素をレンダリングしません。 toggleShow メソッドは、ボタンをクリックすることで show 変数の値を変更し、テキスト コンテンツの表示と非表示を切り替えることができます。

v-if ディレクティブに加えて、Vue は v-show ディレクティブも提供します。 v-show ディレクティブの使用法は v-if ディレクティブと似ていますが、v-show ディレクティブは DOM から要素を削除しませんが、CSS を使用して要素の表示と非表示を制御します。したがって、v-show 命令は v-if 命令より効率的です。

要素のグループをレンダリングする必要がある場合は、v-for ディレクティブを v-if ディレクティブと組み合わせて使用​​できます。以下は、v-for ディレクティブと v-if ディレクティブを組み合わせた構文です。

<element v-for="item in items" v-if="expression"></element>

expression は、要素をレンダリングするかどうかを制御する JavaScript 式です。以下は、v-for ディレクティブと v-if ディレクティブを一緒に使用する例です。

<template>
  <ul>
    <li v-for="(item, index) in items"
        v-if="item.visible"
        :key="index">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '第一项', visible: true },
        { text: '第二项', visible: false },
        { text: '第三项', visible: true }
      ]
    };
  }
};
</script>

上の例では、Vue は、items 配列内で true の可視属性値を持つ要素をレンダリングします。 1 番目と 3 番目の項目。

v-if ディレクティブを使用して、Vue 要素の表示と非表示をより柔軟に制御します。ただし、場合によっては、v-if 命令がパフォーマンス上の問題を引き起こす可能性があるため、ケースバイケースで選択する必要があることに注意してください。

つまり、v-if 条件付き命令は、Vue フレームワークで非常に一般的に使用される命令であり、その使い方をマスターすることで、開発者はページ レンダリングをより適切に制御し、ユーザー エクスペリエンスを向上させることができます。

以上がVue ドキュメントの v-if 条件ディレクティブの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。