Vue.js如何利用v-for循环生成动态标签 Vue.js如何利用v-for循环生成动态

前言
一、当写入数据为数组时
二、当写入数据为对象时
三、作用于标签属性和事件
总结

前言使用v-for可以用于动态生成html标签。其实就是对于vue中属性是对象或者数组进行遍历生成新的标签。
v-for就像java中的for循环一样，迭代需要的所有元素。
大多数情况是以一个数组嵌套多个对象的数据进行v-for循环

一、当写入数据为数组时如果循环遍历得到的value值是一个对象，需要使用里面的值可以用对象名.key 来调用key对应的value值

v-for写入数组的格式:arrays = []v-for = " (value,index) in arrays " //()内可以是一个参数，多个参数用,隔开//其中value为arrays遍历的值。 index为arrays遍历的索引，从0开始value,index只是变量的名字，可以随意命名，对应的是第一个参数和第二个参数，顺序决定了该变量具体的值

代码实例: 生成一个表格标签，动态生成数据

- 锐客网
编号姓名
{{value.id}} {{value.name}}

编号	姓名
{{value.id}}	{{value.name}}

页面效果:arrays数组里的数据可以是从数据库里读取出来的json文件

文章图片

二、当写入数据为对象时当需要遍历的数据是对象的时候，这个时候在第二参数中不再是索引，而是key值。

json对象一般格式为:{
"key":"value",
"key2":"value2"
}

v-for写入对象的格式: arrays = {}v-for = " (value,key ,index) in arrays " 在()传入的参数中，第一个参数为对象的值，第二个参数为对象的key,第三个参数为对象的索引

代码示例: 显示我的个人信息

- 锐客网
我的个人信息
{{key}} {{value}}

我的个人信息
{{key}}	{{value}}

【Vue.js如何利用v-for循环生成动态标签】页面效果:

文章图片

三、作用于标签属性和事件上述中 v-for = " (value,key ,index) in arrays " 内的() 参数可以传入到标签属性值和事件中。如果需要传入的话属性和事件需要按照Vue绑定，如:属性使用:属性名事件使用@事件名
代码示例：我们对其第一个例子的表格根据class的不同进行上色