---
title: Control Flow
localeTitle: Поток управления
---
## Поток управления

### Conditionals

С Vue.js вы можете решить, хотите ли вы показать или нет фрагмент кода в финале страница, в зависимости от этого состояние. Например, представьте, какой ввод формы требуется текст длиной не менее 8 символов: если ввод пользователя короче 8, чем должно появиться сообщение об ошибке; но если входной сигнал длиннее 8, сообщение исчезает.

Но давайте сделаем более простой пример. Мы хотим условиться об экспонировании сообщение счетчику:

```html

<div id="app"> 
  <p v-if="counter > 10"> 
    This message is only rendered when the counter is greater than 10 
  </p> 
 </div> 
```

```javascript
let app = new Vue({ 
  el: '#app', 
  data: { 
    counter: 0 
  } 
 }); 
```

Если вы перейдете на консоль и начнете увеличивать счетчик, когда он пересекает наш порог 10, сообщение будет показано! Затем, если вы уменьшаете `counter` , Vue.js скроет сообщение, когда `counter` станет ниже 10. Для этого мы использовал директиву `v-if` .

И вам может быть интересно, есть ли для этого `else` что- `if` . И есть `v-else` . Обратите внимание, что `v-else` всегда будет

*   ожидать `v-if` до этого
*   относится к ближайшему `v-if` на странице

Давайте немного изменим наш первый пример, чтобы получить это прямо.

```html

<div id="app"> 
  <p v-if="counter > 10"> 
    This message is only rendered when the counter is greater than 10 
  </p> 
  <p v-else> 
    And this is the "otherwise" option 
  </p> 
 </div> 
```

```javascript
let app = new Vue({ 
  el: '#app', 
  data: { 
    counter: 0 
  } 
 }); 
```

Поиграйте немного с этим, изменив значение `counter` и обратите внимание на сообщение показано.

Vue.js также имеет директиву `v-else-if` .

### Loops

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

```html

<div id="app"> 
  <ul> 
    <li v-for="item in list"> 
      {{ item }} 
    </li> 
  </ul> 
 </div> 
```

```javascript
let app = new Vue({ 
  el: '#app', 
  data: { 
    list: [ 
      "shave", 
      "do the dishes", 
      "clean the sink", 
      "pay the bill" 
    ] 
  } 
 }); 
```

Путь проще, чем вставка большого количества `<li>` . И обратите внимание, что всякий раз, когда `list` изменения, результат будет соответствующим образом изменяться. Попробуйте: откройте консоль и `push` строку в `list` с помощью

```javascript
app.list.push("something else"); 
```

Как и ожидалось, страница, представленная сейчас, имеет наш новый товар!