Многие новые разработчики Vue.js часто не понимают, что им следует использовать v-if или v-show.

Во-первых, давайте выясним, что на самом деле делают эти директивы. Итак, v-if
и v-show — это директивы, напрямую предлагаемые Vue.js. Как следует из названия, v-if используется для условных операторов. Пример

Позвольте мне объяснить, что происходит в этом коде, поэтому в приведенном выше примере у нас есть один div, который использует v-if, у нас также есть кнопка, к которой прикреплен прослушиватель событий, поэтому каждый раз, когда мы нажимаем эту кнопку, он изменяет значение логическая переменная flag, которая объявлена ​​в экземпляре Vue, изменяется так же, как и любая другая, если v-if также проверяет переданный ей аргумент, поэтому, когда наша flag переменная имеет значение true, она будет отображать только первый div и исчезнет, ​​если flag изменяется после щелчка.

На виду

Настоящее веселье начинается сейчас, если вы откроете свой инспектор, вы увидите, что на веб-странице есть только то количество кода, которое вы видите на веб-странице, поэтому куда ушел этот элемент, а ответ исходит непосредственно от Vue. Таким образом, Vue отображает элементы только в соответствии с условным оператором. Он отображает только тот HTML, о котором его просят.

Дайте нам знать, как работает v-show

Это модификация примера v-if, чтобы упростить понимание концепции.

Таким образом, в приведенном выше коде мы использовали v-show директиву, теперь, когда вы нажмете эту кнопку, вы увидите, что foo div исчезает, и когда вы снова нажмете на нее, foo div снова вернется, теперь вы заметите, что вывод первого и второго кода то же самое, но под капотом все работает по-другому.

На виду

Теперь откройте свой инспектор и посмотрите на этот div и наблюдайте за ним, когда вы нажмете кнопку, вы заметите, что свойство отображения со значением none добавляется к div. Вот как работает v-show. Он манипулирует стилем элемента, к которому добавляется.

Сравнение v-if и v-show

Теперь, зная, как работают v-if и v-show, вы бы начали думать об использовании этих двух директив. Основные различия между этими двумя директивами заключаются в том, что при использовании v-if Vue отображает только те элементы, которые соответствуют этому условию, а в v-show манипулирует стилем этого элемента, изменяя свойство отображения этого элемента. Итак, к настоящему времени вы бы знали, как лучше всего использовать обе эти директивы. Давайте посмотрим еще один код

В приведенном выше коде мы использовали v-else так же, как и в любом программировании, которое у нас есть if-else, поэтому здесь также у нас есть директива v-else, и она работает так же, как v-if.

Теперь вы знаете, как работают эти две директивы. Теперь поговорим о том, где что использовать.

Использование

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

v-show можно использовать для простого управления свойством отображения элементов, а также легко отлаживать код, потому что вы можете видеть этот элемент даже после изменения в инспекторе. Но это не работает, когда у нас есть условия для применения к элементам.

Если вы знаете, как работают эти две директивы, вам будет легко использовать их там, где это уместно.