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

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

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

@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, вы можете создавать более сложные условия для отображения элементов на странице в зависимости от различных значений.