100 lines
3.7 KiB
Markdown
100 lines
3.7 KiB
Markdown
|
---
|
|||
|
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");
|
|||
|
```
|
|||
|
|
|||
|
Как и ожидалось, страница, представленная сейчас, имеет наш новый товар!
|