Использование v-if и v-for в Vue.js вместе

Frontend developer Vue.js
1

Слышал что это плохая практика, не понимаю почему, когда кодил на c# обычный if очень даже хорошо сочетался с for, что тут не так, в чем проблема?

2

Плохая практика это потому что у директивы v-for приоритетность важнее и каждый раз записывая как в первом блоке кода у нас будет сначала перебираться весь массив, а затем внутри перебора будет проверятся можно ли его отображать, в таких ситуациях лучше выносить блок с v-if в родительский блок, в данном случае это можно сделать с ul.

<div id="ex">

    
    

    
        <li 
v-for="worker of workers" v-if="visible===true">

            {{worker}}

Как в первом блоке писать плохо, сверху уже объяснил почему, лишние операции.

var a = new Vue({

    el:'#ex',

    data:{

        workers: [

            'Peter','Jim','Leo','Alexander','Alexey'

        ],

        visible:true



    },

})

В этом блоке идет объявление экземпляра vue, создаем массив, и логическое свойство для проверки, можно ли выводить массив или нет.

<div id="ex">

    <ul v-if="visible===true">

        <li v-for="worker of workers">

            {{worker}}

Третий блок – как правильно, а правильно минимизировать напряжение и просто поднять блок с условием вывода, даже в самом c#, там же выгоднее написать условие, перед циклом, если перебор требуется только в зависимости от значения условия, это всё равно что написать цикл, внутри которого будет происходить проверка можно ли его выводить, и в случае если нельзя то будет стоять оператор break.