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