Vue.js如何利用v-for循环生成动态标签
更新时间：2022年01月14日 09:57:37 作者：盛世如念
这篇文章主要给大家介绍了关于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只是变量的名字，可以随意命名，对应的是第一个参数和第二个参数，顺序决定了该变量具体的值代码实例: 生成一个表格标签，动态生成数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
<tr v-for="(value,index) in arrays">
<td>{{value.id}}</td>
<td>{{value.name}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arrays:[
{
"id":"A1",
"name":"wa1"
},
{
"id":"A2",
"name":"wa2"
},
{
"id":"A3",
"name":"wa3"
}
]
},
methods:{
}
});
</script>
</body>
</html>页面效果: arrays数组里的数据可以是从数据库里读取出来的json文件
二、当写入数据为对象时
当需要遍历的数据是对象的时候，这个时候在第二参数中不再是索引，而是key值 。
json对象一般格式为: {
"key":"value",
"key2":"value2"
}
v-for写入对象的格式:
arrays = { }
v-for = " (value,key ,index) in arrays "
在()传入的参数中，第一个参数为对象的值，第二个参数为对象的key,第三个参数为对象的索引代码示例: 显示我的个人信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<caption>我的个人信息</caption>
<tr v-for="(value,key,index) in obj">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
obj:{
"id":"A1",
"name":"zhangsan",
"sex":"男",
"age":20
}
},
methods:{
}
});
</script>
</body>
</html>页面效果:
三、作用于标签属性和事件
上述中 v-for = " (value,key ,index) in arrays " 内的() 参数可以传入到标签属性值和事件中 。如果需要传入的话属性和事件需要按照Vue绑定 ，如: 属性使用:属性名 事件使用 @事件名
代码示例：我们对其第一个例子的表格根据class的不同进行上色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<style>
.A0{
color:red;
}
.A1{
color:blue;
}
.A2{
color:orange;
}
</style>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
<tr v-for="(value,index) in arrays" :class="'A'+index">
<td>{{value.id}}</td>
<td>{{value.name}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arrays:[
{
"id":"A1",
"name":"wa1"
},
{
"id":"A2",
"name":"wa2"
},
{
"id":"A3",
"name":"wa3"
}
]
},
methods:{
}
});
</script>
</body>
</html>页面效果:
当然也可以传入到@事件的函数参数中。
总结
到此这篇关于Vue.js如何利用v-for循环生成动态标签的文章就介绍到这了,更多相关Vue.js v-for循环生成动态标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue路由 重定向和别名的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
我们在会开发项目的同时,也应该了解一下项目是如何部署到服务器的,下面这篇文章主要给大家介绍了关于vue项目打包并部署到Linux服务器的相关资料,需要的朋友可以参考下2023-01-01
今天小编就为大家分享一篇vue-router动态设置页面title的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了Vue3中ref和reactive函数的使用教程，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，需要的可以参考一下2022-07-07
本文主要介绍了vite获取所有环境变量(env)的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)
这篇文章主要介绍了vue3.0找不到模块“./App.vue”或其相应的类型声明,报错原因是typescript 只能理解 .ts 文件，无法理解 .vue文件，本文通过多种情况分析给大家详细讲解，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了ElementUI radio组件选中小改造，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了Vue+springboot批量删除功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
父子组件通讯是指在前端开发的组件化架构中,父组件与子组件之间互相传递数据和触发功能的一种机制,这种机制使得组件能够保持独立性的同时,也能协同工作,本文给大家介绍了Vue父子组件通讯的四种方法,需要的朋友可以参考下2024-07-07
watch 的本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。watch的实现利用了effect 和 options.scheduler 选项，这篇文章主要介绍了Vue3源码分析侦听器watch的实现原理,需要的朋友可以参考下2022-08-08
最新评论