2.2 KiB
2.2 KiB
title | localeTitle |
---|---|
Control Flow | 控制流 |
控制流
条件语句
使用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
, 当counter
低于10时,Vue.js将隐藏消息。为此,我们 使用了指令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还可以帮助生成相同代码的多个副本 结构,带有循环。经典示例是动态呈现的列表。
<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
一些字符串push
送到list
中
app.list.push("something else");
正如所料,现在呈现的页面有我们全新的项目!