列表循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<style>
.box{
width:200px;
height:200px;
background: rgb(134, 97, 97);
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="fruit in arr">
{{ fruit }}
</li>
</ul>
<hr>
<ul>
//index可以获取下标
<li v-for="(fruit,index) in arr">
{{index}} =>
{{ fruit }}
</li>
</ul>
<hr>
<ul>
<li v-for="(el,key,index) in json">
{{ key }}
=>
{{ index }}
=>
{{ el }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
arr:['香蕉','苹果','梨子','菠萝'],
json:{
name:'小明',
age:18,
gender:0 // 0男 1女
}
}
})
</script>
</body>
</html>
楼层循环渲染案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<style>
.box{
width:200px;
height:200px;
background: rgb(134, 97, 97);
}
</style>
</head>
<body>
<div id="app">
<div class="floor" v-for="floor in floors">
<h3>
{{ floor.title }}
</h3>
<div class="floor-main">
<div class="item" v-for="item in floor.items">
<p>
商品名称{{ item.itemName }}
</p>
<p>
价格：{{ item.price }}
</p>
</div>
</div>
</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
floors:[
{
title:"手机",
items:[
{
itemName:'小米10',
price:2000,
desc:"便宜、配置好"
},
{
itemName:'小米11',
price:3000,
desc:"便宜、配置好"
},
{
itemName:'小米12',
price:4000,
desc:"便宜、配置好"
},
]
},
{
title:"电视",
items:[
{
itemName:'电视1',
price:2000,
desc:"便宜、配置好"
},
{
itemName:'电视2',
price:3000,
desc:"便宜、配置好"
},
{
itemName:'电视3',
price:4000,
desc:"便宜、配置好"
},
]
}
]
}
})
</script>
</body>
</html>
