草庐IT

用三种方式实现简易及计算器

yhyh296 2023-04-02 原文

目标:用三种方式实现简易的计算器(计算属性,监听器,方法)

  1.创建html,导入vue,实例化vue对象。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>

    <script>
        const vm = new Vue({})

  2.在body标签下创建个input标签,计算符用下拉菜单来表示。

此处的v-model.number实现双向绑定且让后边的数字当成数字处理,否则会当成字符串处理,

 

placeholder="请输入第一个数",让输入框在未输入数据时显示“请输入第一个数字”,

 

后续的两种方式的计算器也都是用类似于这种形式。

此处为用计算属性实现的html部分,结尾的res为计算属性。

        <input type="text" placeholder="请输入第一个数" v-model.number="num1">
        <select v-model="sign">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="num2"> <br>
        结果是:{{res}} <br>

  

此处为监听器实现计算功能,

<input type="text" placeholder="请输入第一个数" v-model.number="num3">
        <select v-model="sign1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="num4"> <br>
        答案:{{res1}} <br>

用方法实现计算功能

此处给每个输入框设置了一个监听事件,当输入框的数据发生变化且失去焦点,则自动执行“change”方法。

        <input type="text" placeholder="请输入第一个数" v-model.number="num5" @change="change">
        <select v-model="sign2"  @change="change">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="num6" @change="change"> <br>
        答案:{{res2}}

  

3.完善vue的数据属性。

给每一个计算器的两个数字都给定义,定义为num1,num2...........,结果定义两个为res2,res3.各个操作符都定义为sign1,sign2,sign3.以备后续使用。

        const vm = new Vue({
            el: "#app",
            data: {
                num1:0,
                num2:0,
                sign:"+",
                num3:0,
                num4:0,
                sign1:"+",
                res1:"",
                num5:0,
                num6:0,
                sign2:"+",
                res2:""
            },
    </script>

  4.编写方法实现计算功能

    4.1.用计算属性实现

      

 computed:{
                res(){
                    if(this.sign === "+") {
                        return this.num1 + this.num2;
                    } else if(this.sign === "-") {
                        return this.num1 - this.num2;
                    } else if(this.sign === "*") {
                        return this.num1 * this.num2;
                    } else if(this.sign === "/"){
                        return this.num1 / this.num2;
                    }
                }
            },

  4.2用监听器实现

  逻辑如下:watch{}部分是一个监听器,用于监听num3,num4和sign1数据的变化,当他们的值发生变化之后,自动触发对应的方法,更新res1的值。

            watch:{
                num3(val){
                    if(this.sign1 === "+") {
                        this.res1 = val + this.num4;
                    } else if(this.sign1 === "-") {
                        this.res1 = val - this.num4;
                    } else if(this.sign1 === "*") {
                        this.res1 = val * this.num4;
                    } else if(this.sign1 === "/"){
                        this.res1 = val / this.num4;
                    }
                },
                num4(val){
                    if(this.sign1 === "+") {
                        this.res1 = this.num3 + val;
                    } else if(this.sign1 === "-") {
                        this.res1 = this.num3 - val;
                    } else if(this.sign1 === "*") {
                        this.res1 = this.num3 * val;
                    } else if(this.sign1 === "/"){
                        this.res1 = this.num3 / val;
                    }
                },
                sign1(val){
                    if(val === "+") {
                        this.res1 = this.num3 + this.num4;
                    } else if(val === "-") {
                        this.res1 = this.num3 - this.num4;
                    } else if(val === "*") {
                        this.res1 = this.num3 * this.num4;
                    } else if(val === "/"){
                        this.res1 = this.num3 / this.num4;
                    }
                }
            }

 

    4.3用方法实现。(方法的实现逻辑与计算属性的逻辑一致)

 methods:{
                change(){
                    if(this.sign2 === "+") {
                        this.res2 = this.num5 + this.num6;
                    } else if(this.sign2 === "-") {
                        this.res2 = this.num5 - this.num6;
                    } else if(this.sign2 === "*") {
                        this.res2 = this.num5 * this.num6;
                    } else if(this.sign2 === "/"){
                        this.res2 = this.num5 / this.num6;
                    }
                }
            }

     5.完整代码实现及效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <input type="text" placeholder="请输入第一个数" v-model.number="num1">
        <select v-model="sign">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="num2"> <br>
        结果是:{{res}} <br>
        <input type="text" placeholder="请输入第一个数" v-model.number="num3">
        <select v-model="sign1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="num4"> <br>
        答案:{{res1}} <br>
        <input type="text" placeholder="请输入第一个数" v-model.number="num5" @change="change">
        <select v-model="sign2"  @change="change">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="num6" @change="change"> <br>
        答案:{{res2}}
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                num1:0,
                num2:0,
                sign:"+",
                num3:0,
                num4:0,
                sign1:"+",
                res1:"",
                num5:0,
                num6:0,
                sign2:"+",
                res2:""
            },
            methods:{
                change(){
                    if(this.sign2 === "+") {
                        this.res2 = this.num5 + this.num6;
                    } else if(this.sign2 === "-") {
                        this.res2 = this.num5 - this.num6;
                    } else if(this.sign2 === "*") {
                        this.res2 = this.num5 * this.num6;
                    } else if(this.sign2 === "/"){
                        this.res2 = this.num5 / this.num6;
                    }
                }
            },
            computed:{
                res(){
                    if(this.sign === "+") {
                        return this.num1 + this.num2;
                    } else if(this.sign === "-") {
                        return this.num1 - this.num2;
                    } else if(this.sign === "*") {
                        return this.num1 * this.num2;
                    } else if(this.sign === "/"){
                        return this.num1 / this.num2;
                    }
                }
            },
            watch:{
                num3(val){
                    if(this.sign1 === "+") {
                        this.res1 = val + this.num4;
                    } else if(this.sign1 === "-") {
                        this.res1 = val - this.num4;
                    } else if(this.sign1 === "*") {
                        this.res1 = val * this.num4;
                    } else if(this.sign1 === "/"){
                        this.res1 = val / this.num4;
                    }
                },
                num4(val){
                    if(this.sign1 === "+") {
                        this.res1 = this.num3 + val;
                    } else if(this.sign1 === "-") {
                        this.res1 = this.num3 - val;
                    } else if(this.sign1 === "*") {
                        this.res1 = this.num3 * val;
                    } else if(this.sign1 === "/"){
                        this.res1 = this.num3 / val;
                    }
                },
                sign1(val){
                    if(val === "+") {
                        this.res1 = this.num3 + this.num4;
                    } else if(val === "-") {
                        this.res1 = this.num3 - this.num4;
                    } else if(val === "*") {
                        this.res1 = this.num3 * this.num4;
                    } else if(val === "/"){
                        this.res1 = this.num3 / this.num4;
                    }
                }
            }
        })
    </script>
</body>

</html>

 

有关用三种方式实现简易及计算器的更多相关文章

  1. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串? - 2

    我试图获取一个长度在1到10之间的字符串,并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符,然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间,其中100是最大分数。计算平均分并将字母等级作为字符串返回,即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join,

  4. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  5. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上,我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解),但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行,然后我尝试添加评论。靠我自己,我设法让它进入了可以从script/console添加评论的阶段,但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作,以添加评论。我的问题是:这是“标准”方式吗?我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  6. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  9. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  10. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

随机推荐