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>