快捷導(dǎo)航

Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽

更新時(shí)間：2022年01月14日 09:57:37 作者：盛世如念

這篇文章主要給大家介紹了關(guān)于Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

使用v-for可以用于動(dòng)態(tài)生成html標(biāo)簽。其實(shí)就是對(duì)于vue中屬性是對(duì)象或者數(shù)組進(jìn)行遍歷生成新的標(biāo)簽。

v-for就像java中的for循環(huán)一樣，迭代需要的所有元素。

大多數(shù)情況是以一個(gè)數(shù)組嵌套多個(gè)對(duì)象的數(shù)據(jù)進(jìn)行v-for循環(huán)

一、當(dāng)寫入數(shù)據(jù)為數(shù)組時(shí)

如果循環(huán)遍歷得到的value值是一個(gè)對(duì)象，需要使用里面的值可以用 對(duì)象名.key 來調(diào)用key對(duì)應(yīng)的value值

        v-for寫入數(shù)組的格式:

        arrays = [    ]

        v-for = " (value,index) in arrays " 

                 //()內(nèi)可以是一個(gè)參數(shù)，多個(gè)參數(shù)用,隔開

                //其中value為arrays遍歷的值。 index為arrays遍歷的索引，從0開始

        value,index只是變量的名字，可以隨意命名，對(duì)應(yīng)的是第一個(gè)參數(shù)和第二個(gè)參數(shù)，順序決定了該變量具體的值

代碼實(shí)例: 生成一個(gè)表格標(biāo)簽，動(dòng)態(tài)生成數(shù)據(jù)

<!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>編號(hào)</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數(shù)組里的數(shù)據(jù)可以是從數(shù)據(jù)庫里讀取出來的json文件

二、當(dāng)寫入數(shù)據(jù)為對(duì)象時(shí)

當(dāng)需要遍歷的數(shù)據(jù)是對(duì)象的時(shí)候，這個(gè)時(shí)候在第二參數(shù)中不再是索引，而是key值。

json對(duì)象一般格式為: {

"key":"value",

"key2":"value2"

}

        v-for寫入對(duì)象的格式: 

        arrays = {  }

        v-for = " (value,key ,index) in arrays " 

        在()傳入的參數(shù)中，第一個(gè)參數(shù)為對(duì)象的值，第二個(gè)參數(shù)為對(duì)象的key,第三個(gè)參數(shù)為對(duì)象的索引

代碼示例: 顯示我的個(gè)人信息

<!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>我的個(gè)人信息</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>

頁面效果:

三、作用于標(biāo)簽屬性和事件

上述中 v-for = " (value,key ,index) in arrays " 內(nèi)的() 參數(shù)可以傳入到標(biāo)簽屬性值和事件中。如果需要傳入的話屬性和事件需要按照Vue綁定，如: 屬性使用:屬性名事件使用 @事件名

代碼示例：我們對(duì)其第一個(gè)例子的表格根據(jù)class的不同進(jìn)行上色

<!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>編號(hào)</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>

頁面效果:

當(dāng)然也可以傳入到@事件的函數(shù)參數(shù)中。

總結(jié)

到此這篇關(guān)于Vue.js如何利用v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽的文章就介紹到這了,更多相關(guān)Vue.js v-for循環(huán)生成動(dòng)態(tài)標(biāo)簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: