iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

通常我們會用 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>

https://i.imgur.com/wbgbmTl.png


上一篇
[Day5] 物件和陣列
下一篇
[Day7] 表單資料綁定
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言