Vue中v-if和v-for为什么不能连用

477 阅读1分钟

判断condition是否成立,对某个数组listItem做循环

错误的写法:

<div v-for="(item,index) in listItem" v-if="condition"></div>

原因:在vue中,v-for的优先级高于v-if,不管condition是否成立,v-for都会做循环,上述写法会导致性能浪费

正确的写法:

<div v-if="conditon">
    <div v-for="(item,index) in listItem"><div>
</div>