Vue.js 前端表格页面示例 - 快速构建表格数据展示
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Vue.js 前端表格页面示例</title>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
<pre><code> th, td {
text-align: left;
padding: 8px;
border: 1px solid black;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</code></pre>
</head>
<body>
<div id='app'>
<h2>Vue.js 前端表格页面</h2>
<table>
<thead>
<tr>
<th v-for='col in columns'>{{ col }}</th>
</tr>
</thead>
<tbody>
<tr v-for='row in rows'>
<td v-for='col in columns'>{{ row[col] }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
columns: ['Name', 'Age', 'Gender'],
rows: [
{Name: 'Tom', Age: 20, Gender: 'Male'},
{Name: 'Jane', Age: 25, Gender: 'Female'},
{Name: 'Jack', Age: 30, Gender: 'Male'},
{Name: 'Mary', Age: 35, Gender: 'Female'},
]
}
})
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lKBm 著作权归作者所有。请勿转载和采集!