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

 

 

 

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