v-show と v-if を使用して Vue でさまざまなタイプのデータをレンダリングする方法

Vue は、現在最も人気のあるフロントエンド フレームワークの 1 つで、MVVM アーキテクチャ パターンを採用し、データ駆動型のビューを通じてフロントエンド開発をより効率的かつシンプルにします。 Vue では、v-show と v-if が一般的に使用される命令であり、DOM 要素の表示またはレンダリングを制御できます。

しかし、開発プロセスでは、さまざまな種類のデータに応じてレンダリングするためにさまざまな DOM 構造を使用する必要がよくありますが、このとき、v-show と v-if の違いは特に重要です。

まず、v-show は DOM 要素のスタイルを制御する命令で、CSS の display 属性によって要素の表示/非表示を制御します。 v-show にバインドされた式が true の場合、要素は表示され、それ以外の場合は非表示になります。例を次に示します:

<div v-show="isShow">这里是要显示的内容</div>

この例では、v-show を介してブール値 isShow をバインドします。isShow が true の場合、div 要素が表示されます。 isShow が false の場合、要素は非表示になりますが、DOM にはまだ存在します。

これに対して、v-if は DOM 要素の有無を制御する命令です。 v-if によってバインドされた式が true の場合、要素は DOM にレンダリングされます。それ以外の場合、要素はレンダリングされません。例を次に示します:

<div v-if="isRender">这里是要渲染的内容</div>

この例では、v-if を介してブール値 isRender をバインドします。isRender が true の場合、div 要素が DOM にレンダリングされます。 isRender が false の場合、要素は DOM にレンダリングされません。

まとめると、v-show は要素の表示と非表示を制御するもので、CSS の display 属性によってのみ実現され、既存の DOM 要素を変更することで完成します。 v-if は要素の有無を制御するもので、DOM を動的に操作することで実装され、挿入や削除の操作が頻繁に行われます。

それでは、さまざまな種類のデータに応じて v-show と v-if のどちらを選択すればよいのでしょうか?以下に例を示します。

<div>
  <ul v-show="isShowList">
    <li v-for="item in list">{{item.name}}</li>
  </ul>
  <table v-if="isShowTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</div>

この例では、v-show を使用して UL リストの表示と非表示を制御し、v-if を使用してテーブルのレンダリングを制御します。 isShowList が true の場合、ul リストが表示され、isShowTable が true の場合、テーブル table が表示されます。

上記の例から、既存の DOM 要素を動的に表示または非表示にする必要がある場合は、v-show を使用する必要があることがわかります。さまざまなタイプのデータに基づいてさまざまな DOM 要素を動的に生成する必要がある場合は、v-if を使用する必要があります。

もちろん、実際の開発ではデータ表示命令を 1 つだけ選択する必要はなく、v-show と v-if を組み合わせて使用​​することで、さまざまな種類のデータ表示の要件を満たします。データの量が多い場合、DOM 要素を動的に挿入または削除すると、ページのパフォーマンスに大きな負担がかかることに注意してください。したがって、頻繁な挿入または削除操作を避け、v-show を使用して既存の DOM 要素を制御するように努める必要があります。

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