[Day6] 迴圈(v-for)和條件式(v-if)

第 12 屆 iThome 鐵人賽

DAY 6

Modern Web

少年學Vue，如隙中窺月系列第 6 篇

12th鐵人賽 vue.js

Leo

2020-09-20 12:12:57

1413 瀏覽

分享至

通常我們會用 for 迴圈來存取陣列裡面的值，而在 Vue 中，我們則是使用 v-for 指令。如果我們今天使用 test 陣列來紀錄學生考試成績，以物件形式當作陣列的值，物件裡面分別存放 name 學生姓名還有 score 考試成績。透過 v-for 我們將 test 物件值存入 in item ，就很像 foreach 的概念，item 會自動代替陣列裡面的每個物件，而 index 就是物件在陣列的索引值，透過這個方式，li 標籤會自動生成陣列裡面物件的數目，而如果我們要將資料渲染到畫面，就用前面提到的 {{}} 方式來顯示資料。我們也可以在 li 標籤中加上 v-if 指令，就是 if 的概念，來設定條件式篩選資料，像是 score<60 ，找出成績低於 60 分的同學，由於前面的 v-for 已經將陣列資料設定到 item，如果要存取資料記得都要用 item 來取代物件。

<body>
    <div id=app>
        全班成績：
        <ul>
            <li v-for="(item,index) in test">{{index}}.{{item.name}} 得分:{{item.score}}</li>
        </ul>
        不及格：
        <ul>
            <li v-for="(item,index) in test" v-if="item.score<60">{{index}}.{{item.name}} 得分:{{item.score}}</li>
        </ul>
    </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data:{
            test:[
                {
                    name: 'Leo',
                    score: 44
                },
                {
                    name: 'Amy',
                    score: 89
                },
                {
                    name: 'Perter',
                    score: 59
                },
                {
                    name: 'Leo',
                    score: 90
                },
            ]
        }
    })
</script>