这是利用Vue来写的一个九九乘法表代码简明，很简单

最新推荐文章于 2024-09-02 08:39:16 发布

原创最新推荐文章于 2024-09-02 08:39:16 发布 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了如何使用Vue.js编写九九乘法表。代码简洁，虽然在Markdown展示时遇到一些格式问题，但在实际软件如VSCode中运行正常。提供代码供读者参考使用。

九九乘法表

直接上代码 ↓

<!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="./node_modules/_vue@2.6.11@vue/dist/vue.js"></script>
    <!-- 之前已终端安装了 vue,所以这里直接引用了   npm i vue -->
</head>

<body>
    <div id="box"> 
        <!-- 遍历 -->
        <p v-for="item1 in arr">
            <span v-for="item2 in arr" v-show="item1>=item2">
                <!-- 遍历 -->
                {{item2}}*{{item1}}=&nbsp;{{item1*item2}}&nbsp;&nbsp;
                <!-- &nbsp; 添加空格 纯粹是为了美观点 -->
            </span>
        </p>
    </div>

    <script>
        new Vue({
            el:'#box',
            data:{
                arr:[1,2,3,4,5,6,7,8,9] //九个小朋友
            }
        })
    </script>
</body>
</html>