做网站的技术,网络网站知识app,鹿岛建设 网站,旅游精品网站建设v-for的基本介绍
v-for 是一个指令#xff0c;
它是用来在 html 模板中实现循环的。它可以循环 普通的数组、也可以直接循环一个范围值#xff0c;也可以循环对象的每个属性。v-for 的语法介绍
div v-for(item,index) in arrayName : keyindex…v-for的基本介绍
v-for 是一个指令
它是用来在 html 模板中实现循环的。它可以循环 普通的数组、也可以直接循环一个范围值也可以循环对象的每个属性。v-for 的语法介绍
div v-for(item,index) in arrayName : keyindex{{index}} - {{item}}
/div指令语法如下 v-for(item,index) in arrayName :keyindex 指令说明 arrayName : 要遍历的数组的名称 item : 数组的一个一个的元素,这个名称可以随便起 index: 数组元素的下标索引这个名称也可以随便起 :key : 给每一个循环对象添加一个key值标识是唯一的可以不写但是推荐写上比较好 v-for 的基本使用案例
案例说明 简单的定义一个数组然后通过循环展示数组的数据template!-- v-for 遍历数组 --div v-for(stu,indexA) in stuList :keyindexA{{ indexA }} - {{ stu }} : {{ stu.id }} - {{ stu.name }}/div
/templatescript setup langtsimport { ref } from vue// 定义一个数组const stuList ref([{id:100,name:小红},{id:101,name:小蓝},{id:102,name:小绿}])/scriptstyle scoped
/style运行效果
