代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td {
margin: 10px;
padding: 5px;
border: 1px solid black;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<div id="app">
<table>
<tbody>
<tr v-for="(row, rowIndex) in multiplicationTable" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex"
:class="{ 'highlight': rowIndex === 0 || cellIndex === 0 }">
{{ cell }}
</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = Vue.createApp({
data() {
return {
multiplicationTable: [],
};
},
mounted() {
this.generateMultiplicationTable();
},
methods: {
generateMultiplicationTable() {
for (let i = 1; i <= 9; i++) {
const row = [];
for (let j = 1; j <= 9; j++) {
row.push(i * j);
}
this.multiplicationTable.push(row);
}
},
},
});
app.mount('#app');
</script>
</body>
</html>
运行结果
1666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
