vue v-for 的多重嵌套

在這裏插入圖片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>vue的多重嵌套</title>
	<script src="vue-2.6.10.js"></script>
</head>

<body>
	<table  border="1" rules="groups" cellpadding="10" cellspacing="10">
		<colgroup>
			<col>
		</colgroup>
		<thead>
			<tr >
				<th >test</th>
				<th>test</th>
			</tr> 
		 </thead>
		 <tbody class="liebiao" >
			<tr v-for="value in content" >
				<td>{{value.id}} </td>
				<td > 
					<select name="test"  style="width:100px;"  >
						<option  v-for="test1 in items" :value="test1.value">{{test1.str}}</option>
					</select>
				</td>
			</tr>
		 </tbody>
	</table>
</body>


<script>
var vm  = new Vue({
  el: '.liebiao',
  data: {
	content: [
		{id:1},
		{id:2},
		{id:3},
	],
	items: [
		{value:1,str:"1"},
		{value:2,str:"2"},
		{value:3,str:"3"},
	],
  }
});

</script>
</html>


發佈了35 篇原創文章 · 獲贊 9 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章