Vue文件中的條件渲染函數實例分析

Vue是一款非常受歡迎的JavaScript框架，它提供了一些方便開發者的工具和功能，讓開發者可以更方便地建立複雜的網路應用程式。其中，條件渲染函數是Vue中一個非常有用的功能，可以幫助開發者動態地控制和渲染頁面上的元素。在本文中，我們將對Vue文件中的條件渲染函數進行分析和實例示範。

一、Vue的條件渲染函數簡介

Vue中可以使用v-if和v-show指令來實現條件渲染。這些指令都可以讓我們根據條件來控制某些元素是否需要渲染到頁面上。

v-if指令是根據表達式的值來判斷是否需要渲染元素，如果表達式的值為真，則渲染該元素；否則，不渲染該元素。例如：

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

在上面的範例中，只有當Vue實例的shown屬性值為true時，才會在頁面上渲染出這個div元素。

v-show指令也可以實現元素的條件渲染，但它的實作方式和v-if有點不同。 v-show指令是根據表達式的值來動態改變元素的display屬性，如果表達式的值為真，則將元素的display屬性設為block，從而讓元素在頁面上顯示出來；否則，將元素的display屬性設定為none，讓元素在頁面上被隱藏起來。例如：

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

在上面的範例中，只要Vue實例的shown屬性值為true，這個div元素就會顯示出來，否則就會被隱藏起來。

二、v-if和v-show的差異點

#雖然v-if和v-show都可以實現元素的條件渲染，但是它們在實作方式上有所區別，主要表現在以下幾個方面：

1. 渲染開銷

v-if指令是在每次渲染時都會重新判斷條件表達式的值，並且根據該表達式的值來新增或移除元素。因此，當條件表達式的值較為複雜或元素較多時，v-if的渲染開銷會比較大。

v-show指令只是透過動態改變元素的display屬性來隱藏或顯示元素，不需要重新建立或移除元素，因此渲染開銷比較小。但是，在元素的初始渲染時，v-show指令需要先判斷條件表達式的值，並根據該值來設定元素的display屬性，因此渲染速度可能會比v-if慢一些。

2. 初始化渲染開銷

v-if指令在條件表達式初始為false的情況下，不會進行渲染。只有當條件表達式的值變成true時，才會開始進行渲染。因此，v-if的初始化渲染開銷會比v-show小一些。

v-show指令在初始渲染時，會根據條件表達式的值來動態設定元素的display屬性，進而決定元素是否顯示。因此，v-show的初始化渲染開銷會比v-if大一些。

3. 渲染效能

v-if指令在條件運算式的值變更時，會重新判斷，並重新建立或移除對應的元素。當只有少量元素需要動態渲染時，v-if的效能會比v-show略好一些。

v-show指令只是透過動態改變元素的display屬性來控制元素的顯示和隱藏，不需要重新建立或移除元素。因此，在需要頻繁切換元素顯示和隱藏的情況下，v-show的效能會比v-if好一些。

三、v-if和v-show使用場景的選擇

是基於上述不同點，我們可以根據實際需求來選擇v-if和v-show。

當需要經常切換元素的顯示和隱藏時，可以選擇使用v-show指令。例如：用於顯示和隱藏某些操作面板或對話方塊、切換選單等。

當需要根據複雜邏輯判斷是否需要渲染某些元素，或是需要動態建立或移除元素時，可以選用v-if指令。例如：根據使用者的登入狀態來渲染頁面中的某些元素、根據使用者權限來渲染頁面中的某些操作按鈕等。

四、實例分析

#下面我們來基於一個實例來示範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中文網其他相關文章！