vue实现一个九九乘法表

今天用vue实现一个简单的九九乘法表

首先引入vue文件

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

创建vue实例

<script>
    var app = new Vue({//创建vue实例
        el: '#app',//element为id是app的节点
        data: {//储存数据
            num: 9,//我们要的是九九乘法表，所以就是9，也可以是其他的值。
        },
    })
</script>

然后渲染到页面中

<div id="app">
    <table><!--创建一个表格-->
        <tr v-for="i in num"><!-- 第几行就取几，最多取到num，也就是我设置的9. -->
            <td style="width:100px;" v-for="j in i"><!-- 第几列就取几，最多取到和当前行数一样。然后所有的等式挤在一块儿不好看，为单元格设置宽度，好看点。-->
                {{j}}*{{i}}={{j*i}}
            </td><!-- 每一个单元格内，用当前单元格所在列数乘以行数即可。-->
        </tr>
    </table>
</div>

这样就完成了一个九九乘法表，实现效果如下：