Как использовать директиву "v-if" в Vue.js?

Пользователь

от brenna , в категории: JavaScript , 6 месяцев назад

Как использовать директиву "v-if" в Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от magali , 4 месяца назад

@brenna 

Директива "v-if" в Vue.js используется для условного отображения элементов на странице в зависимости от значения булевой переменной или выражения.


Пример использования:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
  
    Этот текст будет показан, если isShown = true
    Список пуст
  



export default {
  data() {
    return {
      isShown: true,
      items: []
    }
  }
}


В этом примере, если переменная "isShown" равна true, то на странице будет отображен элемент "p", содержащий текст "Этот текст будет показан, если isShown = true". Если же переменная "items" имеет длину 0, на странице будет отображен элемент "span" с текстом "Список пуст".


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