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（六）：條件與循環