原文链接：vue(vue-js)—列表渲染(v-for) – 每天进步一点点 (longkui.site)
列表渲染是前端经常用到的代码，在vue中用v-for做列表渲染。
1.基础用法
首先我们构造一个json数据，
[
{
"name":"张三1",
"sex":"男",
"age":12
},
{
"name":"张三2",
"sex":"女",
"age":31
},
{
"name":"张三4",
"sex":"男",
"age":43
},
{
"name":"张三3",
"sex":"男",
"age":13
}
]然后通过下面的代码进行遍历：
<div>
<li v-for="i in list">
{{i.name}} --{{i.sex}}--{{i.age}}
</li>
</div>效果图：
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<li v-for="i in list">
{{i.name}} --{{i.sex}}--{{i.age}}
</li>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
list: [
{
"name": "张三1",
"sex": "男",
"age": 12
},
{
"name": "张三2",
"sex": "女",
"age": 31
},
{
"name": "张三4",
"sex": "男",
"age": 43
},
{
"name": "张三3",
"sex": "男",
"age": 13
}
]
},
})
</script>
</body>
</html>2.带key值的写法
<div>
<li v-for="(i,index) in list" :key="index">
{{i.name}} --{{i.sex}}--{{i.age}}--{{index}}
</li>
</div>比较推荐这种写法，实际开发中，返回的json数据如果没有唯一标识，将会是一场灾难！！
效果图：
3.数值与对象的区别
除了可以遍历数组之外，还可以遍历对象，比如下面这样的数据：
list2:{
name:"张三",
sex:"男",
age:"12",
}遍历形式改成这样
<div>
<li v-for="(value,index) in list2" :key="index">
{{index}} --{{value}}
</li>
</div>效果如下：
注意：遍历对象的时候，（value,index），前者是value,后者是key。不要写反。
标签：vue,name,渲染,--,age,张三,sex,js From： https://www.cnblogs.com/longkui-site/p/18464926