关于使用vue来渲染出一张简易九九乘法表

Mr.Smlie

已于 2023-07-14 13:28:12 修改

阅读量264

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-14 13:27:05 首次发布

本文链接：https://blog.csdn.net/qq_68297714/article/details/131720415

版权

解决思路：

一、

九九乘法表可以被线分成九行九列，每一个元素都有对应的行与列相乘而得
接着我们就可以创建一个表格来搭出大框架
由于vue自带的v-for循环，我们只需要写出第一行，第一列的代码，以及第一个位置的代码，让后就可以通过v-for来将其它的位置的元素生成

	<body>
		<div class="main">
			<table>
				<thead>
					<tr>
						<th></th>
						<th v-for="column in columns" :key="column">{{ column }}</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="row in rows">
						<th>{{ row }}</th>
						<td v-for="column in columns" :key="column">{{ row * column}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>

二、

接下来就是写javascript部分
使得rows，columns值都为九

	<head>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
	</head>
	<body>
		<div class="main">
			<table>
				<thead>
					<tr>
						<th></th>
						<th v-for="column in columns" :key="column">{{ column }}</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="row in rows">
						<th>{{ row }}</th>
						<td v-for="column in columns" :key="column">{{ row * column}}</td>
					</tr>
				</tbody>
			</table>
		</div>
        <script>
            const app = {
                data() {
                    return {
                        columns: 9,
                        rows: 9,
                    }
                },
            }
            Vue.createApp(app).mount(".main")
        </script>

三、

可以看到现在基本上已经出现了，但是这样子导致了数字有多余
现在就需要用v-if进行一次判断从而达到去重的目的
进行一次判断确认是否需要输出

 <text v-if="row <= column">&nbsp;&nbsp;&nbsp;&nbsp;{{ row * column}}</text>

四、

通过style标签稍微美化下

    <style>
        .main{
            border-style: solid 1px black;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color: black;
            background-color: antiquewhite;
            width: 300px;
            height: 300px;
            line-height: 25px;
            text-align: center;
        }
    </style>

最后的样子及代码

在这里插入图片描述

<!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>
        .main{
            border-style: solid 1px black;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color: black;
            background-color: antiquewhite;
            width: 300px;
            height: 300px;
            line-height: 25px;
            text-align: center;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
</head>
<body>
    <div class="main">
      <table>
        <thead>
          <tr>
            <th colspan="9">九九乘法表</th>
            <th v-for="column in columns" :key="column">
                <!-- &nbsp;&nbsp;&nbsp;{{ column }} -->
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows">
            <!-- <th>{{ row }}</th> -->
            <td v-for="column in columns" :key="column" >
                <text v-if="row <= column">&nbsp;&nbsp;&nbsp;&nbsp;{{ row * column}}</text>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
        const app = {
            data() {
                return {
                    columns: 9,
                    rows: 9,
                }
            },
        }
        Vue.createApp(app).mount(".main")
    </script>
</body>
</html>

Mr.Smlie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
关于使用vue来渲染出一张简易九九乘法表

二、接下来就是写javascript部分使得rows，columns值都为九三、可以看到现在基本上已经出现了，但是这样子导致了数字有多余现在就需要用v-if进行一次判断从而达到去重的目的进行一次判断确认是否需要输出-四、最后的样子及代码
复制链接

扫一扫