100 lines
2.2 KiB
Markdown
100 lines
2.2 KiB
Markdown
---
|
||
title: Control Flow
|
||
localeTitle: 控制流
|
||
---
|
||
## 控制流
|
||
|
||
### 条件语句
|
||
|
||
使用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` ， 当`counter`低于10时，Vue.js将隐藏消息。为此，我们 使用了指令`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`指令。
|
||
|
||
### 循环
|
||
|
||
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`一些字符串`push`送到`list`中
|
||
|
||
```javascript
|
||
app.list.push("something else");
|
||
```
|
||
|
||
正如所料，现在呈现的页面有我们全新的项目！ |