Vue2.x v-for与v-if的执行

👁 2021-02-21

Vue2.x中v-for和v-if为何不能连用

如果二者在同一个标签中，v-for会比v-if优先执行。
因为首先需要循环数组，然后看每个循环出来的标签中是否含有v-if，如果有值为true就会显示，如果没有或者值为false就不会显示。
如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
如果连用的话会把 v-if 给每个元素都添加一下,会造成性能浪费。
v-for和v-if在同一个标签中

<body>
    <div id="app">
        <div>
            <ul v-for="item in colors" :key="item" v-if="isShow">
                <li>{{item}}</li>
            </ul>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                colors: ['red','yellow','bule','purple'],
                isShow: true
            }
        })
    </script>
</body>

解决的办法：可以将v-for与v-if进行嵌套

<div id="app">
    <div v-if="isShow">
        <ul v-for="item in colors" :key="item">
            <li >{{item}}</li>
        </ul>
    </div>
</div>
<div id="app">
    <div >
        <ul v-for="item in colors" :key="item">
            <li v-if="isShow">{{item}}</li>
        </ul>
    </div>
</div>