vue动态的循环表格,vue循环div
本文主要介绍Vue.js如何通过v-for循环生成动态标签的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
前言1。当要写入的数据是数组2时。当要写入的数据是对象3时。它作用于标签属性和事件摘要。
前言
使用v-for可以用于动态生成html标签。其实就是对于vue中属性是对象或者数组进行遍历生成新的标签。
V-for就像java中的for循环，遍历所有需要的元素。
在大多数情况下，对于v-for循环，多个对象的数据嵌套在一个数组中。
一、当写入数据为数组时
如果循环遍历得到的值是一个对象，如果需要使用里面的值，可以用 对象名.key 调用key对应的值。
用于写入数组的v-格式：
数组=[ ]
数组中的v-for=(值，索引
//()可以是一个参数，多个参数用。
//其中value是数组遍历的值。indexarrays遍历的索引，从0开始。
Value，index只是变量的名字，可以随意命名。它对应第一个参数和第二个参数，顺序决定了变量的具体值。
代码实例： 生成一个表格标签，动态生成数据
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题/标题
script src=js/vue.js/script
/头
身体
div id=应用程序
表格边框=1
tr
第个数字/第
Th名称/th
/tr
tr v-for=(值，索引)在数组中
td{{value.id}}/td
td{{value.name}}/td
/tr
/表格
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{
数组：[
{
id:A1 ，
名称: wa1
},
{
id:A2 ，
名称: wa2
},
{
id:A3 ，
名称: wa3
}
]
},
方法：{
}
});
/脚本
/body
/html
页面效果：数组中的数据可以是从数据库中读取的json文件。
二、当写入数据为对象时
当要遍历的数据是对象时，不再是索引，而是第二个参数中的键值。
json对象的一般格式是：{
键:值，
关键字2 :值2
}
v-用于书写对象的格式：
数组={ }
数组中的v-for=(值，键，索引
在()传入的参数中，第一个参数是对象的值，第二个参数是对象的键，第三个参数是对象的索引。
代码示例： 显示我的个人信息
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题/标题
script src=js/vue.js/script
/头
身体
div id=应用程序
表格边框=1
标题我的个人信息/标题
tr v-for=(值，键，索引)in obj
td{{key}}/td
td{{value}}/td
/tr
/表格
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{
目标
id:A1 ，
姓名:张三，
性别:男性，
年龄:20
}
},
方法：{
}
});
/脚本
/body
/html
页面效果：
三、作用于标签属性和事件
上面v-for = " (value,key ,index) in arrays "中的()参数可以传入标签属性值和事件。如果需要传入，需要根据Vue绑定属性和事件，比如属性使用：属性名 事件使用 @事件名。
我们根据不同的班级给第一个例子的表格涂上颜色。
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题/标题
script src=js/vue.js/script
风格
. A0{
颜色：红色；
}
. A1{
颜色：蓝色；
}
. A2{
颜色：橙色；
}
/风格
/头
身体
div id=应用程序
表格边框=1
tr
第个数字/第
Th名称/th
/tr
tr v-for=(value，index)in arrays :class= A index
td{{value.id}}/td
td{{value.name}}/td
/tr
/表格
/div
脚本
var app=新Vue({
埃尔： #app ，
数据：{
数组：[
{
id:A1 ，
名称: wa1
},
{
id:A2 ，
名称: wa2
},
{
id:A3 ，
名称: wa3
}
]
},
方法：{
}
});
/脚本
/body
/html
页面效果：
当然也可以传入@ event的函数参数中。
总结
关于Vue.js如何通过v-for循环生成动态标签的这篇文章到此为止。关于Vue.jsv-for循环生成动态标签的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。