v-for的列表渲染
![image-20201215095246658](https://i-blog.csdnimg.cn/blog_migrate/5320abf94abb18f38baf62daef70e926.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for的列表渲染</title>
</head>
<body>
<div id="app">
<div>
<ul>
<li v-for='item in menus'>
<h3>id:{{item.id}} 名字:{{item.name}}</h3>
</li>
</ul>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
menus:[
{id:1,name:'科比'},
{id:2,name:'乔丹'},
{id:3,name:'詹姆斯'},
{id:4,name:'杜兰特'}
]
},
})
</script>
</body>
</html>
![image-20201215100151185](https://i-blog.csdnimg.cn/blog_migrate/348dd2f273f119c69565ac78ef238e84.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for的列表渲染</title>
</head>
<body>
<div id="app">
<div>
<ul>
<li v-for='(item,index) in menus'>
<h3>{{index}} - id:{{item.id}} 名字:{{item.name}}</h3>
</li>
</ul>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
menus:[
{id:1,name:'科比'},
{id:2,name:'乔丹'},
{id:3,name:'詹姆斯'},
{id:4,name:'杜兰特'}
]
},
})
</script>
</body>
</html>
![image-20201215100329995](https://i-blog.csdnimg.cn/blog_migrate/84845a035f6958db88f30d654e521a75.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for的列表渲染</title>
</head>
<body>
<div id="app">
<div>
<ul>
<li v-for='(item,index) in menus'>
<h3>{{index}} - id:{{item.id}} 名字:{{item.name}}</h3>
</li>
</ul>
<ol>
<li v-for="(val,key) in obj">
{{val}}----{{key}}
</li>
</ol>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
menus:[
{id:1,name:'科比'},
{id:2,name:'乔丹'},
{id:3,name:'詹姆斯'},
{id:4,name:'杜兰特'}
],
obj:{
title:'hello 循环',
author:'jack'
}
},
})
</script>
</body>
</html>
![image-20201215100742502](https://i-blog.csdnimg.cn/blog_migrate/25e6f01127e708688b3e81ec4a51c169.png)
![image-20201215100919834](https://i-blog.csdnimg.cn/blog_migrate/f991bd9107dc25de8e33703731549ae8.png)