【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>

　　看到了吗，这里只运用了一次循环就能把【通常作法】的效果作出来！