Vue ドキュメントの条件付きレンダリング関数の例の分析

Vue は非常に人気のある JavaScript フレームワークであり、開発者にとって便利ないくつかのツールと機能を提供しており、開発者は複雑な Web アプリケーションをより簡単に構築できます。その中でも、条件付きレンダリング機能は Vue の非常に便利な機能であり、開発者がページ上の要素を動的に制御してレンダリングするのに役立ちます。この記事では、Vue ドキュメントの条件付きレンダリング機能を分析してデモンストレーションします。

1. Vue の条件付きレンダリング機能の概要

Vue で v-if および v-show 命令を使用して、条件付きレンダリングを実装できます。これらの命令により、条件に基づいて特定の要素をページ上にレンダリングする必要があるかどうかを制御できます。

v-if ディレクティブは、式の値に基づいて要素をレンダリングする必要があるかどうかを決定します。式の値が true の場合、要素はレンダリングされます。それ以外の場合、要素はレンダリングされません。例:

<div v-if="shown">
  这是一个需要被渲染出来的div元素
</div>

上記の例では、Vue インスタンスの表示された属性の値が true の場合にのみ、div 要素がページ上にレンダリングされます。

v-show ディレクティブでも要素の条件付きレンダリングを実装できますが、その実装は v-if とは少し異なります。 v-show 命令は、式の値に基づいて要素の表示属性を動的に変更します。式の値が true の場合、要素の表示属性はブロックに設定され、要素がページに表示されます。 ; それ以外の場合、要素の表示属性は block に設定されます。表示属性を none に設定すると、要素はページ上で非表示になります。例:

<div v-show="shown">
  这是一个需要被渲染出来的div元素
</div>

上の例では、Vue インスタンスの show 属性の値が true である限り、div 要素が表示され、それ以外の場合は非表示になります。

2. v-if と v-show の違い

v-if と v-show は両方とも要素の条件付きレンダリングを実現できますが、実装方法が異なります。

1. レンダリングのオーバーヘッド

v-if 命令は、条件式がレンダリングされるたびに、その値に基づいて条件式の値を再判断します。要素を追加または削除する式の。そのため、条件式の値が複雑な場合や要素数が多い場合には、v-ifの描画オーバーヘッドが比較的大きくなります。

v-show 命令は、要素の表示属性を動的に変更することによって要素を非表示または表示するだけであり、要素を再作成したり削除したりする必要がないため、レンダリングのオーバーヘッドは比較的小さくなります。ただし、v-show 命令は要素の最初の描画時に条件式の値を決定し、その値に基づいて要素の表示属性を設定する必要があるため、v-if よりも描画速度が遅くなる可能性があります。

2. レンダリング オーバーヘッドの初期化

条件式が最初に false の場合、v-if 命令はレンダリングされません。レンダリングは、条件式の値が true になった場合にのみ開始されます。したがって、v-if の初期レンダリング オーバーヘッドは v-show よりも小さくなります。

v-show 命令は、初期レンダリング時に条件式の値に基づいて要素の表示属性を動的に設定し、それによって要素が表示されるかどうかを決定します。したがって、v-show の初期レンダリング オーバーヘッドは v-if よりも大きくなります。

3. レンダリング性能

v-if命令は、条件式の値が変化した場合に、対応する要素を再判定して再作成または削除します。少数の要素のみを動的にレンダリングする必要がある場合、v-if のパフォーマンスは v-show よりわずかに優れています。

v-show コマンドは、要素の表示属性を動的に変更することによって要素の表示と非表示を制御するだけであり、要素を再作成したり削除したりする必要はありません。したがって、要素の表示と非表示を頻繁に切り替える必要がある場合、v-if よりも v-show の方がパフォーマンスが高くなります。

3. v-if と v-show の使用シナリオの選択

上記の違いに基づいて、実際のニーズに応じて v-if と v-show を選択できます。

要素の表示と非表示を頻繁に切り替える必要がある場合は、v-show コマンドの使用を選択できます。例: 特定の操作パネルやダイアログ ボックスの表示/非表示、メニューの切り替えなどに使用されます。

特定の要素を複雑なロジックに基づいてレンダリングする必要があるかどうかを判断する必要がある場合、または要素を動的に作成または削除する必要がある場合は、v-if ディレクティブを使用できます。たとえば、ユーザーのログインステータスに応じてページ内の特定の要素をレンダリングしたり、ユーザーの権限に応じてページに特定の操作ボタンをレンダリングしたりするなどです。

4. 分析例

例に基づいて v-if と v-show の使用法を示します。

ページに製品のリストを表示する必要があるとします。リストには商品名、価格、在庫、購入ボタンなどの情報が含まれています。同時に、ユーザーがさまざまな条件に基づいてさまざまな製品情報を表示できるように、リストにはフィルタリング機能も提供する必要があります。

1. 商品リスト データの定義

まず、商品情報を含む配列を定義する必要があります。ここでは、配列に既に 10 個のデータが含まれていると一時的に仮定します。商品の情報です。配列の形式は次のとおりです。

goodsList: [
  {
    name: "商品A",
    price: 100,
    stock: 50
  },
  {
    name: "商品B",
    price: 200,
    stock: 80
  },
  ...
]

2. フィルター条件とフィルター結果データを定義します

フィルター関数を実装するには、次のフォームを定義する必要があります。フィルタ条件入力ボックスが含まれています。これらの入力ボックスを使用して、ユーザーはさまざまなフィルタリング条件を入力して、さまざまな製品情報を表示できます。

同時に、フィルター条件を満たさない商品を除外するために、フィルター結果を保存する変数も定義する必要があります。フィルタ条件とフィルタ結果の定義は次のとおりです。

filterForm: {
  name: "",
  minPrice: "",
  maxPrice: ""
},
filteredGoodsList: []

3. 实现筛选逻辑

为了实现筛选功能，我们需要在Vue实例中定义一个方法，该方法会在每次需要筛选时被调用。该方法会根据用户输入的筛选条件，从商品列表中筛选出符合条件的商品，并将结果存储到filteredGoodsList中。

具体实现代码如下：

methods: {
  filterGoodsList() {
    let filterName = this.filterForm.name.toLowerCase()
    let filterMinPrice = this.filterForm.minPrice ? parseInt(this.filterForm.minPrice) : Number.MIN_SAFE_INTEGER
    let filterMaxPrice = this.filterForm.maxPrice ? parseInt(this.filterForm.maxPrice) : Number.MAX_SAFE_INTEGER
    this.filteredGoodsList = this.goodsList.filter((item) => {
      let itemName = item.name.toLowerCase()
      return itemName.indexOf(filterName) !== -1 && item.price >= filterMinPrice && item.price <= filterMaxPrice
    })
  }
}

在这个方法中，我们首先将用户输入的筛选条件分别提取出来，并将maxPrice和minPrice转换为数字类型。然后，我们使用JavaScript数组的filter方法，从商品列表中筛选出符合条件的商品。可以看到，我们使用了itemName.indexOf(filterName) !== -1这种方式，即通过JavaScript中字符串的indexOf方法来检查itemName是否包含了filterName这个子串。如果包含，则返回true，表示该商品符合筛选条件；否则返回false，表示该商品不符合筛选条件。最后，我们将筛选结果存储到filteredGoodsList中。

4. 实现列表渲染

我们可以通过v-for指令来遍历filteredGoodsList数组，并将每个数组元素渲染成一个商品信息块。具体实现代码如下：

<div v-for="(item, index) in filteredGoodsList" :key="index" class="goods-item">
  <div class="goods-name">{{ item.name }}</div>
  <div class="goods-price">{{ item.price }}</div>
  <div class="goods-stock">{{ item.stock }}</div>
  <div class="goods-buy-btn" v-show="item.stock > 0">购买</div>
  <div class="goods-sold-out" v-if="item.stock == 0">已售罄</div>
</div>

在这个代码中，我们将v-for指令绑定到filteredGoodsList数组上，这样就可以遍历这个数组中的所有元素。我们使用: key="index"来为每个元素设置一个唯一的key值，以便Vue能够高效地对列表进行更新。

在每个商品信息块中，我们使用v-show和v-if指令来根据不同的商品库存信息来动态展示不同的元素。如果该商品库存大于0，则会显示购买按钮；否则，会显示“已售罄”的文字提示。

5. 实现筛选表单和筛选按钮

最后，我们需要在页面上添加一个筛选表单，让用户可以输入不同的筛选条件来观察不同的商品信息。表单的代码如下：

<div class="filter-form">
  <label for="filter-name">商品名称：</label>
  <input type="text" id="filter-name" v-model="filterForm.name">
  <label for="filter-min-price">价格区间：</label>
  <input type="text" id="filter-min-price" placeholder="最小价格" v-model="filterForm.minPrice">
  -
  <input type="text" id="filter-max-price" placeholder="最大价格" v-model="filterForm.maxPrice">
  <button @click="filterGoodsList">筛选</button>
</div>

在这个代码中，我们使用了v-model指令将表单元素和Vue实例中的filterForm对象绑定在一起，从而实现了双向数据绑定。我们还添加了一个筛选按钮，在用户点击按钮时会触发filterGoodsList方法，从而重新进行商品列表的筛选和渲染。

六、总结

通过以上分析和实例演示，我们了解了Vue文档中的条件渲染函数的基本知识和使用方法，以及v-if和v-show指令在渲染开销、初始化渲染开销和渲染性能等方面的不同表现。最后，我们还运用条件渲染函数的知识，实现了一个商品列表及其筛选功能的实例。相信这些内容能够对您学习和使用Vue框架提供一些帮助。

以上がVue ドキュメントの条件付きレンダリング関数の例の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。