Vue：条件与循环
Posted shamo89
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue：条件与循环相关的知识，希望对你有一定的参考价值。
1.条件（v-if）
控制切换一个元素是否显示
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: ‘#app-3‘,
data: {
seen: true
}
})
</script>
v-else-if和v-else
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
<div id="app"> {{username}}的成绩 <br> <p v-if="randomnum < 6 && randomnum > 0">不及格</p> <p v-else-if="randomnum < 8 && randomnum >= 6">良</p> <p v-else-if="randomnum <= 10 && randomnum >= 8">优</p> <p v-else>缺考</p> </div> <script> new Vue({ el:"#app", data:{ "username":"小小", "randomnum":Math.random()*10 } }) </script>
这段代码多运行几次，会出现不同的结果。
v-show
也可以使用 v-show 指令来根据条件展示元素
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
ok: true
}
})
</script>
2.循环(v-for)
绑定数组数据渲染列表
<div id="app">
<table>
<tr v-for="device in devices">
<td>{{device.devicetype}}</td>
<td>{{device.devicenumber}}</td>
</tr>
</table>
</div>
<script>
var data = {
"devices":[
{"devicetype":"电梯","devicenumber":2625377},
{"devicetype":"起重机","devicenumber":2625378}
]
}
new Vue({
el: ‘#app‘,
data:data
});
</script>
分别显示index、key和value
<div id="app">
<ul>
<li v-for="(value, key, index) in team">
{{index}} . {{key}} : {{value}}
</li>
</ul>
</div>
<script>
new Vue({
el:‘#app‘,
data:{
team:{
name:‘小王‘,
age:26,
group:‘销售部‘
}
}
})
</script>
迭代整数
<div id="app">
<ul>
<li v-for="n in 5">
{{n}}
</li>
</ul>
</div>
<script>
new Vue({
el:‘#app‘
})
</script>
以上是关于Vue：条件与循环的主要内容，如果未能解决你的问题，请参考以下文章