分别使用方法、监听属性、计算属性来实现计算器功能

已于 2023-04-02 17:11:38 修改
阅读量62 收藏
点赞数
文章标签： vue.js 前端
于 2023-04-01 21:49:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68373628/article/details/129903334
版权

1.实例化vue对象

 <script>
            var vm = new Vue( {
                el: '#app',
                data: {
                    //输入的第一个数字
                    num1: '',
                    //输入的第二个数字
                    num2: '',
                    //运算符
                    opt: '+',
                    //方法计算结果
                    results: 0,
                    //监听属性计算结果
                    result: 0
 
                },

2.用input接收用户输入的值，利用v-model对数据进行绑定

 <body>
        <div id="app">
            <input type="text" placeholder="请输入第一个数字" v-model.number="num1">
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" placeholder="请输入第二个数字" v-model.number="num2"><br>
            <button @click="change">计算</button>
            <br>方法结果:{{results}}
            <br>计算属性结果:{{changes}}
            <br>监听属性结果:{{result}}

3.使用方法实现计算器功能

<!DOCTYPE html>
<html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <script src="./js/vue.js"></script>
    </head>
 
    <body>
        <div id="app">
            <input type="text" placeholder="请输入第一个数字" v-model.number="num1">
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" placeholder="请输入第二个数字" v-model.number="num2"><br>
            <button @click="change">计算</button>
            <br>方法结果:{{results}}
            <br>计算属性结果:{{changes}}
            <br>监听属性结果:{{result}}
        </div>
        <script>
            var vm = new Vue( {
                el: '#app',
                data: {
                    //输入的第一个数字
                    num1: '',
                    //输入的第二个数字
                    num2: '',
                    //运算符
                    opt: '+',
                    //方法计算结果
                    results: 0,
                    //监听属性计算结果
                    result: 0
 
                },
                //方法实现计算器功能
                methods: {
                    change ()
                    {
                        if ( this.opt == '+' )
                        {
                            this.results = this.num1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            this.results = this.num1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            this.results = this.num1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            this.results = this.num1 / this.num2;
                        }
                    }

4.使用监听属性实现计算器功能

<!DOCTYPE html>
<html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <script src="./js/vue.js"></script>
    </head>
 
    <body>
        <div id="app">
            <input type="text" placeholder="请输入第一个数字" v-model.number="num1">
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" placeholder="请输入第二个数字" v-model.number="num2"><br>
            <button @click="change">计算</button>
            <br>方法结果:{{results}}
            <br>计算属性结果:{{changes}}
            <br>监听属性结果:{{result}}
        </div>
        <script>
            var vm = new Vue( {
                el: '#app',
                data: {
                    //输入的第一个数字
                    num1: '',
                    //输入的第二个数字
                    num2: '',
                    //运算符
                    opt: '+',
                    //方法计算结果
                    results: 0,
                    //监听属性计算结果
                    result: 0
 
                },
              
                //监听属性实现计算器功能
                watch: {
                    opt:function ( val )
                    {
                        if ( val == '+' )
                        {
                            this.result = this.num1 + this.num2;
                        } else if ( val == '-' )
                        {
                            this.result = this.num1 - this.num2;
                        } else if ( val == '*' )
                        {
                            this.result = this.num1 * this.num2;
                        } else if ( val == '/' )
                        {
                            this.result = this.num1 / this.num2;
                        }
                    },
                    num1:function ( val )
                    {
                        if ( this.opt == '+' )
                        {
                            return this.result = val + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            return this.result = val - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            return this.result = val * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            return this.result = val / this.num2;
                        }
                    },
                    num2:function ( val )
                    {
                        if ( this.opt == '+' )
                        {
                            this.result = this.num1 + val;
                        } else if ( this.opt == '-' )
                        {
                            this.result = this.num1 - val;
                        } else if ( this.opt == '*' )
                        {
                            this.result = this.num1 * val;
                        } else if ( this.opt == '/' )
                        {
                            this.result = this.num1 / val;
                        }
                    }
                }
            } )
        </script>
    </body>
 
</html>

5.使用计算属性实现计算器功能

 <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <script src="./js/vue.js"></script>
    </head>
 
    <body>
        <div id="app">
            <input type="text" placeholder="请输入第一个数字" v-model.number="num1">
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" placeholder="请输入第二个数字" v-model.number="num2"><br>
            <button @click="change">计算</button>
            <br>方法结果:{{results}}
            <br>计算属性结果:{{changes}}
            <br>监听属性结果:{{result}}
        </div>
        <script>
            var vm = new Vue( {
                el: '#app',
                data: {
                    //输入的第一个数字
                    num1: '',
                    //输入的第二个数字
                    num2: '',
                    //运算符
                    opt: '+',
                    //方法计算结果
                    results: 0,
                    //监听属性计算结果
                    result: 0
 
                },
              
                //计算属性实现计算器功能
                computed: {
                    changes ()
                    {
                        if ( this.opt == '+' )
                        {
                            return this.result = this.num1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            return this.result = this.num1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            return this.result = this.num1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            return this.result = this.num1 / this.num2;
                        }
                    }
                },
               
        </script>

6.完整代码如下

<!DOCTYPE html>
<html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <script src="./js/vue.js"></script>
    </head>
 
    <body>
        <div id="app">
            <input type="text" placeholder="请输入第一个数字" v-model.number="num1">
            <select v-model="opt">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" placeholder="请输入第二个数字" v-model.number="num2"><br>
            <button @click="change">计算</button>
            <br>方法结果:{{results}}
            <br>计算属性结果:{{changes}}
            <br>监听属性结果:{{result}}
        </div>
        <script>
            var vm = new Vue( {
                el: '#app',
                data: {
                    //输入的第一个数字
                    num1: '',
                    //输入的第二个数字
                    num2: '',
                    //运算符
                    opt: '+',
                    //方法计算结果
                    results: 0,
                    //监听属性计算结果
                    result: 0
 
                },
                //方法实现计算器功能
                methods: {
                    change ()
                    {
                        if ( this.opt == '+' )
                        {
                            this.results = this.num1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            this.results = this.num1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            this.results = this.num1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            this.results = this.num1 / this.num2;
                        }
                    }
                },
                //计算属性实现计算器功能
                computed: {
                    changes ()
                    {
                        if ( this.opt == '+' )
                        {
                            return this.result = this.num1 + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            return this.result = this.num1 - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            return this.result = this.num1 * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            return this.result = this.num1 / this.num2;
                        }
                    }
                },
                //监听属性实现计算器功能
                watch: {
                    opt:function ( val )
                    {
                        if ( val == '+' )
                        {
                            this.result = this.num1 + this.num2;
                        } else if ( val == '-' )
                        {
                            this.result = this.num1 - this.num2;
                        } else if ( val == '*' )
                        {
                            this.result = this.num1 * this.num2;
                        } else if ( val == '/' )
                        {
                            this.result = this.num1 / this.num2;
                        }
                    },
                    num1:function ( val )
                    {
                        if ( this.opt == '+' )
                        {
                            return this.result = val + this.num2;
                        } else if ( this.opt == '-' )
                        {
                            return this.result = val - this.num2;
                        } else if ( this.opt == '*' )
                        {
                            return this.result = val * this.num2;
                        } else if ( this.opt == '/' )
                        {
                            return this.result = val / this.num2;
                        }
                    },
                    num2:function ( val )
                    {
                        if ( this.opt == '+' )
                        {
                            this.result = this.num1 + val;
                        } else if ( this.opt == '-' )
                        {
                            this.result = this.num1 - val;
                        } else if ( this.opt == '*' )
                        {
                            this.result = this.num1 * val;
                        } else if ( this.opt == '/' )
                        {
                            this.result = this.num1 / val;
                        }
                    }
                }
            } )
        </script>
    </body>
 
</html>

m0_68373628
关注
分别用方法，计算属性，监听属性实现计算器功能
2201_75321887的博客
03-31 121
分别用方法，计算属性，监听属性实现计算器功能
使用方法，计算属性，监听属性实现计算器功能
m0_71014221的博客
04-01 115
（方法实现计算器效果需要添加点击按钮触对应函数）v-model与对应属性双向绑定。用input接收用户输入的值，select进行运算符选择。
使用计算属性，监听器，方法制作计算器
weixin_66386680的博客
04-02 59
使用计算属性，监听器，方法制作计算器
写个简单的计算器（分别运用方法，计算属性和监听属性）
2302_77163504的博客
04-03 54
这是div中的所有代码，利用‘input’写两个输入框，'placeholder'时当输入框中没有数字时会进行提升（请输入第*数），在利用‘select’元素中的‘option’显示加减乘除符号，同时用v-model对Vue中定义的属性进行关联。这是利用侦听器对输入框的符号切换的侦听，然后用变化后的数值进行数学计算。这时定义计算属性，实现页面中加减乘除符号的切换。这是利用方法，实现对数值的运算的代码。这是在Vue中定义的属性，以下是本次的全部代码。
分别使用VUE的表达式、方法、计算属性、监听器实现计算器功能
04-02
本示例将详细介绍如何使用Vue的表达式、方法、计算属性和监听器来实现一个基础的计算器功能。 首先，Vue的**表达式**是用于在模板中进行简单的数据绑定。它们通常出现在双大括号`{{ }}`中，用于显示数据模型中的值...
使用 Vue 方法，计算属性，监听器完成简易计算器
zhlong666的博客
04-02 181
Vue利用计算属性和侦听属性实现简易计算器
javascript实现计算器功能
10-15
特别地，样式通过设置div元素的宽度和浮动属性来实现排列布局，使得计算器的每个按键大小一致，布局整齐。 3. JavaScript实现逻辑：文章中提到，实现计算器功能主要通过JavaScript来完成。具体地，JavaScript代码会...
uniapp实现计算器功能
10-05
【uniapp实现计算器功能】 ...uniapp的强大之处在于它简化了多平台开发的复杂性，使得开发者可以专注于功能实现和用户体验的优化。这个项目不仅有助于提升uniapp的实战技能，也是学习前端开发和算法的好例子。
纯javascript代码实现计算器功能(三种方法)
10-23
在本文中，我们将探讨如何仅使用JavaScript代码实现一个计算器的功能。这种计算器可以应用于多个场景，包括但不限于装修预算计算、贷款利率计算等实际工作领域。以下是使用纯JavaScript实现计算器功能的三种方法。 ...
Vue CLI：初学者指南与深入理解
x15514104477的博客
09-10 1011
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 1256
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
Vue Router push方法的使用
ithongchou的博客
09-13 598
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
美术|基于java+vue的美术外包管理信息系统(源码+数据库+文档)
weixin_66413741的博客
09-10 898
游戏美术管理信息系统。该系统基于B/S即所谓浏览器/服务器模式，应用java技术，选择MySQL作为后台数据库。系统主要包括系统首页，个人中心，用户管理，公司管理，作品信息管理，作品订单管理，外包需求管理，外包应征管理，流程追踪管理，在线交流管理，在线回复管理，管理员管理，留言反馈，系统管理等功能模块。本文首先介绍了游戏美术外包管理信息技术发展背景与发展现状，然后遵循软件常规开发流程，首先针对系统选取适用的语言和开发平台，
有关 Element-ui 的一些思考
小白小白从不日别的博客
09-11 623
这里列举了一些我们在使用element-ui时的一些实用技巧，比如主题样式修改、el-form-item label宽度自适应等
大文件切片上传-vue3.0
m0_56416159的博客
09-12 470
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
qq_60281421的博客
09-11 480
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
从`v-model`到显式绑定：掌控Vue组件中的数据流动20240910
Narutolxy的博客
09-10 591
v-model
基于Java、SpringBoot、Vue的加油站管理系统设计
最新发布
程序猿大波的博客
09-14 222
本系统是一个基于Java、SpringBoot和Vue的加油站管理系统。它旨在提高加油站的运营效率，优化客户服务体验，并通过数据分析支持更精准的业务决策。该系统包括用户管理、汽油管理、站点管理等功能模块。通过这些功能，管理员可以方便地管理关键业务信息，同时提供实时的设备监控和数据分析工具，帮助管理者做出明智的决策。此外，系统还提供了安全与权限控制功能，确保只有授权用户才能访问敏感信息，保护加油站的数据安全。整个系统设计简洁易用，能够满足加油站日常运营的需求，提高工作效率和客户满意度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值