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

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

от brenna , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от magali , год назад

@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" с текстом "Список пуст".


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

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

от marisa , 6 месяцев назад

@brenna 

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


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

1
2
3
4
<div>
    <p v-if="isShown">Этот текст будет показан, если isShown = true</p>
    <span v-else>Этот текст будет показан, если isShown = false</span>
</div>


В этом примере, если переменная isShown равна true, то будет отображен элемент p, а если false, то будет отображён элемент span.


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

1
2
3
4
5
<div>
    <p v-if="condition === 'A'">Этот текст будет показан, если condition равна 'A'</p>
    <span v-else-if="condition === 'B'">Этот текст будет показан, если condition равна 'B'</span>
    <span v-else>Этот текст будет показан, если condition равна не 'A' и не 'B'</span>
</div>


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