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

        arrays = [    ]

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

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

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

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

代碼實例: 生成一個表格標(biāo)簽，動態(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>編號</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ù)為對象時

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

json對象一般格式為: {

"key":"value",

"key2":"value2"

}

        v-for寫入對象的格式: 

        arrays = {  }

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

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

代碼示例: 顯示我的個人信息

<!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>

頁面效果:

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

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

代碼示例：我們對其第一個例子的表格根據(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>編號</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)生成動態(tài)標(biāo)簽的文章就介紹到這了,更多相關(guān)Vue.js v-for循環(huán)生成動態(tài)標(biāo)簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: