为什么v-if和v-for不建议用在同一标签

Posted 2022-11-29 哈娄

 如下列代码：

<div v-for="item in [1, 2, 3]" v-if="item == 1">
    item
</div>

v-for的优先级比v-if高，所以会先循环出来，然后再进行item每个 v-if判断。这样就无用的多渲染好多次dom。

解决办法:

用computed写法代替

<div v-for="item in list">
    item
</div>

computed() 
    list() 
        return [1, 2, 3].filter(item => item == 1)