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。
第三个参数:指当前迭代的索引。