首页> 基础笔记 >Vue学习笔记 Vue学习笔记
vue的列表渲染指令v-for
作者：小萝卜 2024-03-09 【 Vue 】 浏览 78
简介我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名
v-for
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：
<p v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</p>
<p v-for="(item,index) in ob_arr" :key="index">name:{{item.names}}---title:{{item.title}}---{{item.keys}}</p>
export default{
data(){
return{
arr:['aa','bb','cc'],
ob_arr:[
{names:'dd1',title:'ee1',keys:'ff1'},
{names:'dd2',title:'ee2',keys:'ff2'},
{names:'dd3',title:'ee3',keys:'ff3'},
],
}
}
}
对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：
<li v-for="item in items">
<span v-for="childItem in item.children">
{{ item.message }} {{ childItem }}
</span>
</li>
你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：
<div v-for="item of items"></div>
在 v-for 里使用范围值
v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。
<span v-for="n in 10">{{ n }}</span>
注意此处 n 的初值是从 1 开始而非 0。
很赞哦！ (0)
