Vue简单实现九九乘法表

最新推荐文章于 2023-09-02 09:32:41 发布
最新推荐文章于 2023-09-02 09:32:41 发布
阅读量283 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60894512/article/details/131711438
版权

Vue实现简单九九乘法表

核心操作很简单,只需要两个v-for循环即可。

    <table id="disp">
        <tr v-for="i in 9">
            <td v-for="j in i">
                <button>{{j}}*{{i}}={{i*j}}</button>
            </td>
        </tr>
    </table>

我们首先需要定义应用，然后将其挂载到设定的dom元素上。
注意，如果是在挂载的元素外部的话是无法访问到vue应用的方法的。

const Disp={
            data(){
                return {
                    showExpaination:false,
                    text:""
                }
            }
        }
Vue.createApp(Disp).mount("#main");

后面是我自己做的一些完善：

首先设置样式：

    @charset 'utf-8';
    #main{
        width: 700px;
        height: 500px;
        margin: auto;
        background-image: url(imgs/星野愛.png);
        border: 10px solid burlywood;
        border-radius: 100px;
    }
    #disp{
        display: block;
        width: 600px;
        height: 300px;
        border: 5px solid burlywood;
        border-radius: 50px;
        margin:auto;
        margin-top: 100px;
        padding:30px;
    }
    button{
        border: 2px solid black;
        background-color: azure;
        display: block;
        border-radius: 100px;
        width: 55px;
    }
    button:hover{
        background-color: greenyellow;
        border: 2px solid yellow;
    }
    textarea{
        width: 50%;
        height: 30px;
        margin: auto;
        margin-left: 180px;
        margin-top: 20px;
        text-align: center;
        color:yellow;
        font-weight: bolder;
        font-size: 20px;
        background-color: black;
        opacity: 0.9;
        border-radius: 100px;
    }

通过 background_image 和 ：hover 实现了增加背景，实现鼠标放在乘法表的某一个式子上时式子变化颜色，产生突出效果。
在这里插入图片描述
在这里插入图片描述

然后设计Vue应用的方法，实现鼠标经过乘法式子时，隐藏在下面的文本框出现，并写出对应的口令，如“三七二十一”、“一九得九”等。

const Disp={
            data(){
                return {
                    showExpaination:false,
                    text:""
                }
            },
            methods:{
                ShowExpaination:function(i,j){
                    let back="";
                    if(i*j>10){
                        let b=i*j%10;
                        if(b==0)b=10;
                        back=this.Trans2Upper(Math.floor(i*j/10))+"十"+this.Trans2Upper(b);
                    }
                    else back="得"+this.Trans2Upper(i*j);
                    this.text=this.Trans2Upper(j)+this.Trans2Upper(i)+back;
                    this.showExpaination=true;
                },
                Trans2Upper:function(i){
                    if(i==1)return '一';
                    if(i==2)return '二';
                    if(i==3)return '三';
                    if(i==4)return '四';
                    if(i==5)return '五';
                    if(i==6)return '六';
                    if(i==7)return '七';
                    if(i==8)return '八';
                    if(i==9)return '九';
                    if(i==10)return "十";
                }
            }
        }
        Vue.createApp(Disp).mount("#main");

增加两个属性，showExpaination表示是否显示文本框，text表示文本框内输出的内容。再定义两个方法，ShowExpaination(i,j)表示把当前的乘数i和乘数j相乘的式子转化为“XX得X”的形式。Trans2Upper(i)表示将数字转化为汉字数字。

然后设置对应对象的事件。

<button  @mouseenter="ShowExpaination(i,j)" @mouseleave="showExpaination=!showExpaination">{{j}}*{{i}}={{i*j}}</button>

button是乘法式子的载体，设置两个事件：mouseenter鼠标进入事件和mouseleave鼠标离开事件。@是v-on的缩写，表示来监听 DOM 事件，当某个事件发生后，可以执行后续的操作。

这里是当鼠标移到式子上方时，调用ShowExpaination(i,j)显示文本框及其内容。当鼠标离开时将属性showExpaination置反。

<textarea readonly="readonly" v-show="showExpaination" >{{text}}</textarea>

文本框设置了v-show指令，当showExpaination为true时就会显示，false就会隐藏。内容为应用的text属性。

运行效果：
在这里插入图片描述

整体代码：

index.html:

    <!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="Vue.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="main">
            <table id="disp">
                <tr v-for="i in 9">
                    <td v-for="j in i">
                        <button  @mouseenter="ShowExpaination(i,j)" @mouseleave="showExpaination=!showExpaination">{{j}}*{{i}}={{i*j}}</button>
                    </td>
                </tr>
            </table>
            <textarea readonly="readonly" v-show="showExpaination" >{{text}}</textarea>
        </div>
        <script>
            const Disp={
                data(){
                    return {
                        showExpaination:false,
                        text:""
                    }
                },
                methods:{
                    ShowExpaination:function(i,j){
                        let back="";
                        if(i*j>10){
                            let b=i*j%10;
                            if(b==0)b=10;
                            back=this.Trans2Upper(Math.floor(i*j/10))+"十"+this.Trans2Upper(b);
                        }
                        else back="得"+this.Trans2Upper(i*j);
                        this.text=this.Trans2Upper(j)+this.Trans2Upper(i)+back;
                        this.showExpaination=true;
                    },
                    Trans2Upper:function(i){
                        if(i==1)return '一';
                        if(i==2)return '二';
                        if(i==3)return '三';
                        if(i==4)return '四';
                        if(i==5)return '五';
                        if(i==6)return '六';
                        if(i==7)return '七';
                        if(i==8)return '八';
                        if(i==9)return '九';
                        if(i==10)return "十";
                    }
                }
            }
            Vue.createApp(Disp).mount("#main");
        </script>
    </body>
    </html>

style.css:

@charset 'utf-8';
#main{
    width: 700px;
    height: 500px;
    margin: auto;
    background-image: url(imgs/星野愛.png);
    border: 10px solid burlywood;
    border-radius: 100px;
}
#disp{
    display: block;
    width: 600px;
    height: 300px;
    border: 5px solid burlywood;
    border-radius: 50px;
    margin:auto;
    margin-top: 100px;
    padding:30px;
}
button{
    border: 2px solid black;
    background-color: azure;
    display: block;
    border-radius: 100px;
    width: 55px;
}
button:hover{
    background-color: greenyellow;
    border: 2px solid yellow;
}
textarea{
    width: 50%;
    height: 30px;
    margin: auto;
    margin-left: 180px;
    margin-top: 20px;
    text-align: center;
    color:yellow;
    font-weight: bolder;
    font-size: 20px;
    background-color: black;
    opacity: 0.9;
    border-radius: 100px;
}

原代码已存放在Github：
git@github.com:Jyunnchi/Vue_99multiplicationTable.git

Kisaragi Jyunn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用vue的v-for写九九乘法表 key
qq_40072782的博客
09-10 4859
v-for 当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。 . v-for 给了两个参数key和index，但是这里需要对遍历的数据区别对待。遍历的数据包括数组和对象，但是在数组下是没有key值的，而在对象下可以得到key，可以显示出来。 ...
vuejs总结
weixin_40543741的博客
05-19 273
vuejs语法 1、基本语法 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 2、常用指令 （1）v-for 用于对象的循环，常用于列表的渲染 <div id="ap...
利用vue技术渲染九九乘法表
2305_79079021的博客
07-15 157
定义一个具有固定宽度和居中对齐的容器样式。这样设置容器的宽度为1200像素，且水平居中对齐。规定元素的显示方式、外边距、内边距、宽度和边框等。循环部分生成九九乘法表，通过。
v-for练习，实现99乘法口诀表
z3436的博客
02-15 405
使用v-for写出99乘法表
关于使用vue来渲染出一张简易九九乘法表
qq_68297714的博客
07-14 268
二、 接下来就是写javascript部分 使得rows，columns值都为九 三、 可以看到现在基本上已经出现了，但是这样子导致了数字有多余 现在就需要用v-if进行一次判断从而达到去重的目的 进行一次判断确认是否需要输出 - 四、 最后的样子及代码
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
vue界面发送表情的实现代码
10-14
主要介绍了vue界面发送表情的实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现简易风速仪表显示小组件
10-10
简易的风速仪表盘显示小组件，主要是用vue开发，已经封装好组件，使用时很简便。可以实时显示风速。适用：大数据界面、仪表盘显示界面等等。
vue el-table实现自定义表头
10-15
主要为大家详细介绍了vue el-table实现自定义表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现制作课程表拖拽
最新发布
04-09
vue实现课程表拖拽
Vue中九九乘法表
He_9a9的博客
09-02 1305
Vue中九九乘法表
Vue.js商城15天从零实战课程、跨平台APP开发(含源代码)
08-10
学会Vue.js的商城开发学会Vue.js和后台数据接口的使用本课程是实战课程，需要了解js和vue.js的基础知识；主要讲解移动商城首页、商城分类、商城购物车、产品分类、产品列表、评论、地址管理、下单、会员注册、会员登录、密码修改、订单列表、收藏、信息列表和详情等功能...
Vue.js三天入门实战教程【免费20节】
05-29
从vue.js的框架安装开始讲起，讲解vue中用到的常用的语法、数据绑定、指令、条件语句、循环语句、样式绑定、事件处理、监听、表单相关以及和后台数据库的交互。
vue技术：九九乘法表
fire_f的博客
07-15 58
作业内容：用vue技术来渲染一个九九乘法表。
用Vue的三种方法实现加减乘除运算
m0_74911203的博客
04-02 4688
接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div。然后用 methods方法 computed方法 watch(侦听器)方法 做出3种不同的加减乘除运算。然后在body里面创建一个div并设置id，我这里给id命名为"app"然后在body里面创建一个div并设置id，我这里给id命名为"app"在body里面创建一个div并设置id，我这里给id命名为"app"在id命名为"app"的div内使用input标签和。
Vue的五种方法实现加减乘除运算
一步一个脚印，踏实努力，向着目标前进
08-22 3928
这些方法都可以实现加减乘除运算，具体使用哪种方法取决于您的需求和项目的架构。
使用vue语法编写程序打印乘法表
小鹿不在林间的博客
02-23 1075
打印99乘法表 如何使用vue的语法打印99乘法表？ 很简单，首先在官网上下载vue.js，打开编辑软件，新建html文件，引入vue.js代码，下面来看主要代码： 在vue实例中，定义一个num为9，表示循环的次数，在li标签里使用v-for指令对num进行遍历，做一次外层循环，循环的索引item从1到9，在每次的外层循环时，都嵌套一个内层循环，每次的内层循环的次数为当前外层循环的索引值ite...
用vue做一个简单的加减乘除运算
Y10109的博客
04-02 799
用vue做一个简单的加减乘除运算
精度计算，math.js在vue中的简单加减乘除
qq_16508301的博客
08-11 2251
vue js精度计算 math.js
hbuilderx 九九乘法表代码
03-25
以下是一个使用JavaScript编写的九九乘法表代码示例： ```javascript for (var i = 1; i ; i++) { var row = ''; for (var j = 1; j ; j++) { row += j + ' * ' + i + ' = ' + (i * j) + ' '; } console.log...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值