Vue中v-if和v-else-if页面加载闪现及v-if/v-show混用问题解析

<div id="divApp">  
<div v-if="type === 'A'" v-cloak>    
A  
</div>  
<div v-else-if="type === 'B'" v-cloak>    
B  
</div>  
<div v-else-if="type === 'C'" v-cloak>    
C  
</div>  
<div v-else v-cloak>    
Not A/B/C  
</div>
</div>

var divApp = new Vue({  
el: '#divApp',  
data: 
{    
isActive: true,    
hasError: false,   
type: 'A'  },  
// 在 `methods` 对象中定义方法  
methods: {  
}
}
)

[v-cloak] 
{ 
display:none;
}

<tbody class="sortable" id="sortTable">
   <tr v-show="items.length" v-for="(item,index) in items" :item="item">
       <td :id="item.objectId">{{index+1}}</td>
       <td>{{item.number}}</td>
   </tr>
   <tr v-else>
       <td colspan='2'>暂无数据</td>
   </tr>
</tbody>

<li v-for="todo in todos" v-if="!todo.isComplete">
 {{ todo }}
</li>