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>