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

Editor to share with you vue do not use v-if and v-for instructions on the same element at the same time, I hope you will learn something after reading this article, let's discuss it together!

Do not use both v-if and v-for instructions on the same element

To filter elements in an array, it is easy to use v-if and v-for on the same element at the same time.

/ / A bad practice

The problem is that the v-for instruction takes precedence over the v-if instruction in Vue. It loops through each element and then checks the v-if condition.

This.products.map (function (product) {if (product.price)

{return this.products.filter (function (product) {return product.price < 100})}}

This has several benefits:

Rendering is more efficient because we don't traverse all the elements

The filtered list is reused only when the dependency changes

This writing helps to separate the component logic from the template, making the component more readable.

After reading this article, I believe you have a certain understanding of "vue do not use v-if and v-for instructions on the same element at the same time". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.