v-for和v-if的问题

2019/09/12 10:40
阅读数 100

当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

 

 

 

原文:http://www.fly63.com/article/detial/4385

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部