关于v-if和v-for不能一起使用在同一个标签上的思考

2024年5月25日 287次阅读 来源: sw22

v-if 和 v-for 一起使用在同一个标签上会怎么样？

看例子：
使用v-for将如下object的所有value遍历显示，其中有一个value是数组

数据：

testData:  {
    name: 'TESTOBJECT', 
    id: 10,
    data: [1.67, 1.33, 0.98, 2.21]
  }

目标运行结果：
TESTOBJECT
10
1.67
1.33
0.98
2.21

初步实践：
.html:

 <ul>
    <li v-for="value in testData">
       <div id="test" v-if="Array.isArray(value)" v-for="item in value">{{item}}</div>
       <div id="test1" v-else>{{value}}</div>
    </li>
  </ul>

运行结果：
打印了10遍TESTOBJECT，10遍10，列出数组内容：1.67 1.33 0.98 2.21

为什么会有10个TESTOBJECT呢？尝试多加两个字母’TESTOBEJECTss‘，此时输出12个TESTOBEJECTss，10个10数字

原因分析：v-for优先级高于v-if，因此上面的html文本中两行div的执行大致是以下顺序：

 
  this.value.map(function(item){
     if(Array.isArray(value)){
        return item; // T E S T O B J E C T
     }else{
        return value; // TESTOBJECT
     }
  })

遍历object的所有value（即li中的v-for），当拿到testData的第一个元素TESTOBJECT时，执行div中的v-for，此时的item对应T E S T O B J E C T这10个元素，于是循环10次，每一次都判断当前元素是否是array，很显然每次判断都是object，于是便打印出10个TESTOBJECT。
10个数字10的情况类似，不过由于是遍历一个数字，那么数字大小就影响循环的次数，如果改为5，则运行显示5遍5.

小结：

  1. vue官网推荐将v-if移到父元素，如ul中，先检查，后循环遍历。不要用在同一个元素上。
  2. 对上面例子进行如下修改：
 <ul>
    <li v-for="value in testData">
        <div v-if="Array.isArray(value)">
            <div v-for="item in value">{{item}}</div>
        </div>
        <div v-else>{{value}}</div>
    </li>
  </ul>

运行结果：

  • TESTOBJECT
  • 10
  • 1.67
    1.33
    0.98
    2.21
    原文作者：sw22
    原文地址: https://segmentfault.com/a/1190000019886647
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞