Vue 문서의 조건부 렌더링 기능 예제 분석

Vue는 매우 인기 있는 JavaScript 프레임워크로 개발자에게 편리한 몇 가지 도구와 기능을 제공하여 개발자가 복잡한 웹 애플리케이션을 보다 편리하게 구축할 수 있도록 합니다. 그 중 조건부 렌더링 기능은 Vue에서 매우 유용한 기능으로, 개발자가 페이지의 요소를 동적으로 제어하고 렌더링하는 데 도움을 줄 수 있습니다. 이 글에서는 Vue 문서의 조건부 렌더링 기능을 분석하고 시연해 보겠습니다.

1. Vue의 조건부 렌더링 기능 소개

Vue에서 v-if 및 v-show 명령을 사용하여 조건부 렌더링을 구현할 수 있습니다. 이러한 지침을 사용하면 조건에 따라 페이지에서 특정 요소를 렌더링해야 하는지 여부를 제어할 수 있습니다.

v-if 명령은 표현식의 값을 기반으로 요소를 렌더링해야 하는지 여부를 결정합니다. 그렇지 않으면 요소가 렌더링되지 않습니다. 예:

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

위의 예에서 div 요소는 Vue 인스턴스의 표시된 속성 값이 true인 경우에만 페이지에 렌더링됩니다.

v-show 지시문은 요소의 조건부 렌더링을 구현할 수도 있지만 구현이 v-if와 약간 다릅니다. v-show 명령은 표현식의 값을 기반으로 요소의 표시 속성을 동적으로 변경합니다. 표현식의 값이 true이면 요소의 표시 속성이 블록으로 설정되어 요소가 페이지에 표시됩니다. ; 그렇지 않으면 요소의 표시 속성이 차단으로 설정됩니다. 표시 속성을 없음으로 설정하면 페이지에서 요소가 숨겨집니다. 예:

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

위의 예에서 Vue 인스턴스의 표시된 속성 값이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!