日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 Vue 正文

Vue.js如何利用v-for循環生成動態標簽_vue.js

作者：盛世如念 ? 更新時間： 2022-03-28 Vue

前言

使用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>

頁面效果:

當然也可以傳入到@事件的函數參數中。

總結

原文鏈接：https://blog.csdn.net/wasane/article/details/122434775

欄目分類
最近更新