Shulou(Shulou.com)06/01 Report--

This article mainly introduces why Vue should avoid using v-for and v-if at the same time, it has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

V-for traversal to avoid using v-if at the same time

Why avoid using v-for and v-if at the same time

V-for is a higher priority in Vue2, so during compilation, all list elements are traversed to generate virtual DOM, and then v-if is used to determine that only those that meet the conditions are rendered, which will result in a waste of performance, because what we want is not to generate virtual DOM that does not meet the conditions.

V-if has a higher priority in Vue3, which means that when the judgment condition is an attribute in the list traversed by v-for, v-if cannot get it.

So in some scenarios that need to be used at the same time, you can filter the list by calculating attributes, as follows

{{item.title}} / / Vue2.xexport default {computed: {activeList () {return this.list.filter (item = > {return item.isActive})} / Vue3import {computed} from "vue" Const activeList = computed (() = > {return list.filter (item = > {return item.isActive})}) Thank you for reading this article carefully. I hope the article "Why should you avoid using v-for and v-if at the same time in Vue" shared by the editor will be helpful to you. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.