2
在我的Vue應用程序中,我通過一系列學校循環。每所學校都有一個名字,一系列教師數量(每個年級一個)和一系列學生數量(每個年級一個)。多個元素每v- for循環
以下代碼有效,但只是因爲我手動編碼了<td>
。
new Vue({
el: '#app',
data: {
schools: [
{ name: 'Lincoln', teachers: [3, 4, 1], students: [55, 42, 39] },
{ name: 'Oak Grove', teachers: [1, 2, 1], students: [31, 36, 23] },
{ name: 'Fairview', teachers: [1, 3, 2], students: [30, 26, 39] },
],
},
});
thead th,
tbody td { text-align: center; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<table id="app" class="table">
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="2">Grade K</th>
<th colspan="2">Grade 1</th>
<th colspan="2">Grade 2</th>
</tr>
<tr>
<th>Teachers</th>
<th>Students</th>
<th>Teachers</th>
<th>Students</th>
<th>Teachers</th>
<th>Students</th>
</tr>
</thead>
<tbody>
<tr v-for="school in schools">
<th>{{ school.name }}</th>
<td>{{ school.teachers[0] }}</td>
<td>{{ school.students[0] }}</td>
<td>{{ school.teachers[1] }}</td>
<td>{{ school.students[1] }}</td>
<td>{{ school.teachers[2] }}</td>
<td>{{ school.students[2] }}</td>
</tr>
</tbody>
</table>
通知重複行:
<td>{{ school.teachers[x] }}</td>
<td>{{ school.students[x] }}</td>
這不是太上該簡化示例中的一個問題。但在我的真實項目中,還有更多的列和子列。 有沒有辦法做一個重複循環來顯示<td>
?
我試過另一種v型的循環,但因爲它是<tr>
裏面,只有<td>
和<th>
是允許的。
這是完美的!謝謝。 – Travis