代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私の九九の表です٩(๑•ㅂ•)۶</title>
<script src=" https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<style>
#app{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 24px;
color: darkmagenta;
}
</style>
</head>
<body>
<div id="app">
<!-- table标签用来创建表格结构 -->
<table>
<!-- tbody标签用来定义表格主体部分,将主体进行分组 -->
<tbody>
<!-- 在table数组中进行循环,每次循环都将当前元素赋值给row -->
<tr v-for="row in table">
<td v-for="num in row">
{{ num }}
</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = Vue.createApp({
data() {
return {
table: [],
};
},
mounted() {
this.generateTable();
},
methods: {
generateTable() {
for (let i = 1; i <= 9; i++) {
/* 创建空数组row,形成二维数组table[][],存储每一行数据 */
const row = [];
for (let j = 1; j <= i; j++) {
/* push()函数:在一个数组的末尾加上元素,并返回整个新数组 */
row.push(`${j} × ${i} = ${j * i}`);
}
/* 每一行循环后,将row数组里的内容推到table里,形成二维九九乘法表 */
this.table.push(row);
}
}
},
})
/* 将Vue应用程序挂载到=id="app"的元素上,使Vue应用程序的内容可以在该元素中渲染和交互 */
app.mount('#app');
</script>
</body>
</html>
结果: