【Vue.js】代碼優化：在dom中加一行v-if就可少寫一個循環類方法

 

【問題描述】

　　把當前用戶的購物車中（cartList），商品（good）選中字段checked = true的商品在訂單頁面中進行展現出來。

 

【通常作法】（兩次循環）

　　首先取出當前用戶的購物車列表，循環裏面的item，若是item=true，就把當前的商品加到orderList數組中，而後經過展現訂單列表的DOM，經過v-if來對orderList數組進行展現出來。

這種做發明顯使用了兩個循環，一個循環是在方法裏面循環，一個循環是在DOM中利用v-for進行循環。

<template>
    <li v-for="item in orderList">
        ......
    </li>
</template>
<script>
     //第一步：獲取當前用戶購物車方法 return cartList
     //第二步：遍歷cartList,而後經過item = true 就把item存儲到數組 orderList中
</script>

 

【代碼優化】（一次循環）

　　首先取出當前用戶的購物車列表cartList數組，而後直接給DOM經過v-for來循環，再加一個條件，v-if=「item.checked===true」,知足就展現出來，代碼以下：

<template>   
    <li v-for="item in cartList" v-if="item.checked === '1'">
        ......
    </li>
</template>
<script>
    //第一步：獲取當前用戶購物車方法 return cartList
</script>

　　看到了嗎，這裏只運用了一次循環就能把【通常作法】的效果作出來！