這篇要來介紹 v-for 和 v-if 這兩個指令
相當於 JavaScript 的 for 迴圈跟 if 判斷式
一樣先把 Vue 的基本架構寫出來:

<div id="app">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            
        }
    })
</script>

接著我們在 data 內新增 list 變數放置一個陣列

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [
                {
                    name: '小明',
                    age: 16
                },
                {
                    name: '小華',
                    age: 38
                },
                {
                    name: '花花',
                    age: 24
                }
            ]
        }
    })
</script>

接著我們使用 v-for 這個指令逐一把每筆資料呈現在頁面上

<div id="app">
    <ul>
        <li v-for="item in list">
            {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

上述的 item 為自定義的變數，接著採用跟讀取物件屬性的方式搭配雙大括號放置在 <li> 內
這時候頁面上就會把所有資料都渲染上去
假設我們想要針對資料來做一些篩選，這時候就可以搭配 v-if 指令來做使用
假設我們想要篩選出年齡小於 25 歲的人
這時候加上 v-if 判斷:

<div id="app">
    <ul>
        <li v-for="item in list" v-if="item.age < 25">
            {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

把判斷式寫在 v-if 內，資料即可做篩選

額外小補充，如果我們想在每筆資料上加上索引，則可以這樣寫:

<div id="app">
    <ul>
        <li v-for="(item,index) in list">
            {{ index }} {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

在自定義的變數加上 index 並渲染到標籤內即可。