freeCodeCamp/guide/russian/vue/control-flow/index.md

title, localeTitle

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

Поток управления

Conditionals

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

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

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

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 на странице

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

<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> 

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

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

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

Циклы

Vue.js так же помогает с созданием множества копий элементов с помощью директивы 'v-for'. Классический пример - динамическая отрисовка списка.

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

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

Гораздо проще чем копирование большого количества '

'. Обратите внимание, что всякий раз, когда массив 'list' изменяется, результат изменяется соответствующим образом. Пропробуйте открыть консоль и добавить новую строку в массив 'items'.

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

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

Получение доступа к итератору

v-for так же поддерживает второй аргумент(опционально). Этот аргумент является порядковым номером элемента в массиве 'items':

<div id="app">
  <ul>
    <li v-for="(item, index) in items">
      {{ index }}: {{ item }}
    </li>
  </ul>
</div>

Таким образом мы можем использовать 'index', чтобы стилизовать первый, последний или четный/нечетный элемент списка по разному, а так же добавить дополнительную логику к нашему компоненту.