v-for 和 v-if 的优先级?

172 阅读1分钟

当它们处于同一节点,都在p标签上,比如:

    <p v-for=”(item,index) in list:key=”index” v-if=”index></p>

v-for 的优先级比 v-if 更高

答:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用(一般不建议放在同一节点上)。
如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。

不建议一起使用如何操作呢?

答:可以改变数据啊,避免在同一元素上同时使用两者,如果是根据数据中的字段去判断是否显示,可以用计算属性先过滤掉隐藏的数据再去v-for循环数据列表。

虽然不建议放在一起使用但是官网并没说必须分开使用,在vue.js里面,v-for和v-if是可以一起使用作用在某个元素上,网上看到一篇文章说永远不要把v-for和v-if同时用在同一个元素上,感觉有点瞎扯,官网也注明了可以一起使用的,还把两个指令的优先级给说明了:

image.png