用vue写一个前端表格页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端表格页面</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>前端表格页面</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/xiR 著作权归作者所有。请勿转载和采集!