v-for和v-if的问题-优快云博客

当v-for和v-if在同一个元素标签上时，v-for优先级高于v-if，也就是说在v-for的每次循环运行中都会调用v-if的判断，所以会出现问题，vue官网推荐将v-if移到父元素。

例子：

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

<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。

上边代码执行原理如下：

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

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

vue官网推荐将v-if移到父元素，如ul中，先检查，后循环遍历。不要用在同一个元素上：

 <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