当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