vue指令-v-for
-
语法
- v-for="(值, 索引) in 目标结构"
- v-for=“值 in 目标结构”
-
目标结构:
- 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
-
注意:
v-for的临时变量名不能用到v-for范围外
例:
<template>
<!-- v-for="值变量,索引变量 in 目标结构" -->
<!-- v-for="值变量 in 目标结构" -->
<!-- 可以遍历数组 / 对象 / 数字 / 字符串(可遍历结构) -->
<div>
<h2>数组</h2>
<ul>
<!-- v-for 要循环生成谁就写在谁身上 -->
<li v-for="(item,index) in arr" :key="index">
{{index}}
---
{{item}}
</li>
</ul>
<h2>复杂一点的结构</h2>
<ul>
<!-- :key 暂时把它理解为一个可提高 v-for 渲染效率的属性配置 , 一般写成 item.id-->
<li v-for="item in res.data " :key="item.id">
{{item.name}}
---
{{item.id}}
</li>
</ul>
<h2>对象(了解)</h2>
<ul>
<li v-for="(val,key) in friend" :key="key">
{{key}}
---
{{val}}
</li>
</ul>
<h2>可以遍历固定的数字/固定的字符串</h2>
<ul>
<li v-for="number in 8" :key="number">
{{number}}
</li>
</ul>
<ul>
<li v-for="hh in '萨瓦迪卡'" :key="hh">
{{hh}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
// 准备数组
arr:["一闪一闪","亮晶晶","满天都是","小星星"],
// 在复杂一点的结构
res:{
code:200,
msg:"请求成功",
data:[
{
id:1,
name:'艾欧尼亚',
},
{
id:2,
name:'德玛西亚',
},
{
id:3,
name:'诺克萨斯',
},
{
id:4,
name:'战争学院',
},
{
id:5,
name:'祖安',
},
]
},
// 遍历对象(了解)
friend:{
name:'如花',
age:'18',
sex:'未知',
}
}
}
}
</script>
<style>
</style>
总结: vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成