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

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 .

Loops

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

<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" 
    ] 
  } 
 }); 

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

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

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