Vue：v-if、v-for、v-else 的渲染问题

 现象：当 v-if和v-for同时使用，且其后紧跟v-else时。v-if条件不满足，v-else循环展示多次（length次）。

示例：

<template>
  <div>
    <div v-if="showList" v-for="cell in members"
         :key="cell.id" class="aaa">{
   
   {cell.title}}</div>
    <div v-else class="bbb">placeholder</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      members: [
        {id: 1, title: 'title1'},
        {id: 2, title: 'title2'},
        {id: 3, title: 'title3'}
      ],
      showList: false
    }
  }
}
</script>

浏览器实际渲染效果：

分析：

即使v-if条件没有满足，v-for仍然执行，此示例中循环了三次（members.length），且渲染v-else部分。

因此，当 v-if和v-for同时使用，且其后紧跟v-else的实际渲染效果等同于，v-for嵌套v-if和v-else。即：

<div v-if="showList" v-for="cell in members"
     :key="cell.id" class="aaa">{
   
   {cell.title}}</div>
<div v-else class="bbb">placeholder</div>

<!--实际渲染效果等同于-->
<template v-for="cell in members">
  <div v-if="showList" class="aaa">{
   
   {cell.title}}</div>
  <div v-else class="bbb">placeholder</div>
</template>

解决方案：

方案一：将v-if提到v-for的上一层

<template v-if="showList">
  <div v-for="cell in members"
       :key="cell.id" class="aaa">{
   
   {cell.title}}</div>
</template>
<div v-else class="bbb">placeholder</div>

方案二：v-else改为v-if

<div v-if="showList" v-for="cell in members"
     :key="cell.id" class="aaa">{
   
   {cell.title}}</div>
<div v-if="!showList"  class="bbb">placeholder</div>

方案一比方案二更符合我们的开发习惯。

扫描二维码关注公众号，回复： 14859977 查看本文章

建议：不推荐同时使用 v-if 和 v-for。
 

The end.