Vue3中v-for循环渲染之v-for与v-if一同使用

Vue3中v-for循环渲染之v-for与v-if一同使用

v-for与v-if一同使用，当它们处于同一节点上时，vue3版本v-if的优先级比v-for更高（vue2版本v-for的优先级比v-if更高），这意味着v-if将分别重复运行于每个v-for循环中。当只想渲染部分列表选项时，可以使用这种组合方式。

【例2.20】  v-for与v-if一同使用（源代码\ch02\2.20.html）。

<div id="app">
        <h3>已经出库的商品</h3>
        <ul>
            <template v-for="goods in goodss">
                <li v-if="goods.isOut">
                    {
   
   {goods.name}}
                </li>
            </template>
        </ul>
        <h3>没有出库的商品</h3>
        <ul>
            <template v-for="goods in goodss">
                <li v-if="!goods.isOut">
                   {
   
   {goods.name}}
               </li>
           </template>
       </ul>
</div>
<!--引入Vue文件-->
<script src="https://unpkg