使用 v-for 做列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表，用于展示列表数据。
语法：
v-for = "(item, index) in items" :key="xxx" 或者 v-for = "(item, index) of items" :key="xxx"
这里可以使用of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法。
:key 动态绑定key，可以理解为index，是遍历对象的唯一标识。
v-for 可以遍历以下类型：
1）遍历数组
<!-- 遍历数组 -->
<h2>人员列表(遍历数组，用的多)</h2>
<ul>
<!-- v-for 用于展示列表数据 -->
<!-- :key 动态绑定key，可以理解为index，是遍历对象的唯一标识 -->
<li v-for="(p,index) in persons" :key="index">
姓名：{{p.name}} 年龄：{{p.age}}
</li>
</ul>
new Vue({
el:"#root",
data(){
return{
persons:[
{id:"001",name:"马铃薯1",age:20},
{id:"002",name:"马铃薯2",age:21},
{id:"003",name:"马铃薯3",age:22}
]
}
}
})
2）遍历对象
<!-- 遍历对象 -->
<h2>汽车信息(遍历对象)</h2>
<ul>
<li v-for="(value,k) in car" :key="k">
{{k}} : {{value}}
</li>
</ul>
new Vue({
el:"#root",
data(){
return{
car:{
name:"奥迪A4L",
price:"27万",
color:"白色"
}
}
}
})
3）遍历字符串（用的少）
<!-- 遍历字符串 -->
<h2>测试遍历字符串(用的少)</h2>
<ul>
<li v-for="(value,index) in str" :key="index">
{{index}} : {{value}}
</li>
</ul>
new Vue({
el:"#root",
data(){
return{
str:"马铃薯的测试"
}
}
})
4）遍历指定次数（用的少）
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数(用的少)</h2>
<ul>
<li v-for="(number,index) in 5" :key="index">
{{index}} : {{number}}
</li>
</ul>
基本列表渲染案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本列表</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表(遍历数组，用的多)</h2>
<ul>
<!-- v-for 用于展示列表数据 -->
<!-- :key 动态绑定key，可以理解为index，是遍历对象的唯一标识 -->
<!--<li v-for="p in persons" :key="p.id">-->
<!-- 姓名：{{p.name}} 年龄：{{p.age}}-->
<!--</li>-->
<li v-for="(p,index) in persons" :key="index">
姓名：{{p.name}} 年龄：{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息(遍历对象)</h2>
<ul>
<li v-for="(value,k) in car" :key="k">
{{k}} : {{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串(用的少)</h2>
<ul>
<li v-for="(value,index) in str" :key="index">
{{index}} : {{value}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数(用的少)</h2>
<ul>
<li v-for="(number,index) in 5" :key="index">
{{index}} : {{number}}
</li>
</ul>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
new Vue({
el:"#root",
data(){
return{
persons:[
{id:"001",name:"马铃薯1",age:20},
{id:"002",name:"马铃薯2",age:21},
{id:"003",name:"马铃薯3",age:22}
],
car:{
name:"奥迪A4L",
price:"27万",
color:"白色"
},
str:"马铃薯的测试"
}
}
})
</script>
</body>
</html>
标签：index,遍历,14,渲染,age,列表,Vue,name From： https://www.cnblogs.com/REN-Murphy/p/17716071.html