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>