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循环生成动态标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3编程流畅技巧使用setup语法糖拒绝写return

    Vue3编程流畅技巧使用setup语法糖拒绝写return

    这篇文章主要为大家介绍了Vue3编程流畅技巧使用setup语法糖拒绝写return的方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

    Vue3 vite配置css 的sourceMap及文件引用配置别名的过程

    这篇文章主要介绍了Vue3 vite配置css的sourceMap,及文件引用配置别名的过程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 浅析Proxy如何实现Vue响应式

    浅析Proxy如何实现Vue响应式

    这篇文章主要是来和大家探讨一下,Vue的响应式系统仅仅是一个Proxy吗,本文将围绕此问题探索一下Proxy是如何实现Vue响应式的,感兴趣的小伙伴可以了解一下
    2023-08-08
  • vue如何清除地址栏参数

    vue如何清除地址栏参数

    这篇文章主要介绍了vue如何清除地址栏参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue-router如何实现history模式配置

    vue-router如何实现history模式配置

    这篇文章主要介绍了vue-router如何实现history模式配置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue-router 组件复用问题详解

    vue-router 组件复用问题详解

    本篇文章主要介绍了vue-router 组件复用问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue中provide、inject详解以及使用教程

    Vue中provide、inject详解以及使用教程

    provide和inject主要为高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中,下面这篇文章主要给大家介绍了关于Vue中provide、inject详解以及使用的相关资料,需要的朋友可以参考下
    2022-11-11
  • 如何解决.vue文件url引用文件的问题

    如何解决.vue文件url引用文件的问题

    这篇文章主要介绍了解决.vue文件url引用文件的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 解决vue3报错:Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)

    解决vue3报错:Unexpected mutation of “xxx“ prop.(eslintvue/no

    这篇文章主要给大家介绍了关于如何解决vue3报错:Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)的相关资料,文中通过代码将解决办法介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue.js按键修饰符及v-model修饰符示例详解

    Vue.js按键修饰符及v-model修饰符示例详解

    这篇文章主要介绍了Vue.js按键修饰符及v-model修饰符,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05

最新评论