"Vue.js" code optimization: Add a line v-if in the DOM to write less a cyclic class method

"Problem description"

The items in the current user's shopping cart (cartlist), Commodity (good) selected field checked = True are displayed on the order page.

"General Practice" (two cycles)

First take the current user's shopping cart list, loop the item inside, if Item=true, add the current item to the OrderList array, and then display the orderlist array through v-if by displaying the DOM of the order list.

This type of hair is clearly used in two loops, a loop that loops through the method, and a loop that uses the v-for to loop through the DOM.

<template>    <li v-for= "item in OrderList" >        ...    </li></template><script>     //First step: Get the current user shopping cart method return cartlist     //Second step: Traverse cartlist and then pass item = True to store item in array orderlist </script>

"Code Optimization" (One-time loop)

First take the current user's shopping cart list cartlist array, and then directly to the DOM through V-for to cycle, and then add a condition, v-if= "Item.checked===true", meet the display, the code is as follows:

<template>       <li v-for= "item in Cartlist" v-if= "item.checked = = ' 1 '" >        ...    </li></template><script>    //First step: Get the current user shopping cart method return cartlist</script>

See, it only uses a cycle to make the "general approach" effect!

"Vue.js" code optimization: Add a line v-if in the DOM to write less a cyclic class method