v-for指令遍歷數組
需要遍歷的數組
var vm = new Vue({
el:"#app",
data:{
shopName:"水果",
items:[
{title:"蘋果"},
{title:"橘子"},
{title:"芒果"}
]
}
});
將需要顯示的內容放在列表中顯示
<div id="app">
<ul>
<li v-for="(item,index) of items">{{index+1}}-{{item.title}}-{{shopName}}</li>
</ul>
</div>
(item,index)
第一個參數:指當前迭代的元素。
第二個元素:指當前元素的索引。
of
後是需要迭代的對象,需要的顯示的內容必須單獨的放在一個{{}}
不能將多個需要顯示的內容放在一起,這樣會出現錯誤不能顯示。
當然of和in可以代替使用,功能的實現是一樣的。
遍歷Vue中的對象
var vm2 = new Vue({
el:"#app2",
data:{
scores:{
MySql:99,
Java:95,
Linux:88
}
}
});
顯示內容
<div id="app2">
<ul>
<li v-for="(score,key,index) in scores">{{index}}-{{key}}-{{score}}</li>
</ul>
</div>
(score,key,index)
第一個參數:指當前迭代的元素。
第二個參數:指的是鍵名,即屬性名。例:MySql。
第三個參數:指當前迭代的索引。