Vue.js代码优化：在dom中加一行v-if就可少写一个循环类方法

Posted 2020-10-26 Lighter_Studio

 

【问题描述】

　　把当前用户的购物车中（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>

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