知识点：

v-model双向绑定

v-on事件绑定

实现效果

源码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <script src="./lib/vue-2.4.0.js"></script>

  </head>

  <body>

    <div id="app">

      <input type="text" v-model="n1" />

      <select v-model="opt">

        <option value="+">+</option>

        <option value="-">-</option>

        <option value="*">*</option>

        <option value="/">/</option>

      </select>

      <input type="text" v-model="n2" />

      <input type="button" value="=" @click="calc" />

      <input type="text" v-model="result" />

    </div>

    <script>

      var vm = new Vue({

        el: '#app',

        data: {

          n1: 0,

          n2: 0,

          opt: '+',

          result: 0

        },

        methods: {

          calc() {

            switch (this.opt) {

              case '+':

                this.result = parseInt(this.n1) + parseInt(this.n2)

                break

              case '-':

                this.result = parseInt(this.n1) - parseInt(this.n2)

                break

              case '*':

                this.result = parseInt(this.n1) * parseInt(this.n2)

                break

              case '/':

                this.result = parseInt(this.n1) / parseInt(this.n2)

                break

              default:

                this.result = 0

            }

          }

        }

      })

    </script>

  </body>

</html>

Vue实现简单计算器功能的更多相关文章

  1. ~Vue实现简单答题功能，主要包含单选框和复选框

    内容 实现简单答题效果 环境 Vue,webpack(自行安装) 实现方式 页面将答题列表传递给调用组件,组件将结果返回给调用页面(其它模式也ok,这只是例子) ------------------- ...

  2. java实现简单计算器功能

    童鞋们,是不是有使用计算器的时候,还要进入运行,输入calc,太麻烦了,有时候甚至还忘记单词怎么拼写,呵呵程序员自己写代码实现,又简单,又方便啊 以下为代码(想要生成可执行工具可参考:http://w ...

  3. vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  4. s12-day04-work01 简单计算器功能实现

    代码: #!/usr/local/env python3 ''' Author:@南非波波 Blog:http://www.cnblogs.com/songqingbo/ E-mail:qingbo. ...

  5. Android-Kotlin简单计算器功能

    上一篇博客 Android-Kotlin-配置/入门 配置好了 AndroidStudio Kotlin 的环境: 选择包名,然后右键: 选择Class类型,会有class: 创建CounterCla ...

  6. Python之实现简单计算器功能

    一,需求分析 要求计算一串包含数字+-*/()的类似于3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4)表达式的数值 二,知识点 正 ...

  7. 简单计算器 安卓 Android 作业

    Android老师布置的课程作业——简单计算器 功能要求实现四则运算,参考界面见下图: 首先给各位老铁提供apk安装包以及项目压缩包,略表诚意~ github地址:https://github.com ...

  8. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  9. 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能

    #!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...

  10. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

随机推荐

  1. [转帖]oracle通过pid查找执行SQL

    通过TOP 命令查看PID:1560 PID USER PR NI VIRT RES SHR S %CPU %MEM TIME+ COMMAND 1560 oracle 20 0 38.978g 0. ...

  2. [转帖]TiDB修改配置参数

    https://www.jianshu.com/p/2ecdb4642579 在TiDB 中,"修改配置参数"似乎是个不精准的说法,它实际包含了以下内容: 修改 TiDB 的系统变 ...

  3. [转帖]ChatGPT研究框架（2023）

    https://www.eet-china.com/mp/a226595.html ChatGPT是基于OpenAI公司开发的InstructGPT模型的对话系统,GPT系列模型源自2017年诞生的T ...

  4. 【转帖】Linux 调优篇 ：虚拟化调优（irqbalance 网卡中断绑定）* 贰

    一.网络流量上不去二.中断绑定2.1 关闭中断平衡守护进程2.2 脱离中断平衡守护进程2.3 手动设置中断的CPU亲和性三. 总结 一.网络流量上不去 在Linux的网络调优方面,如果你发现网络流量上 ...

  5. [转帖]linux磁盘IO读写性能优化

    在LINUX系统中,如果有大量读请求,默认的请求队列或许应付不过来,我们可以 动态调整请求队列数来提高效率,默认的请求队列数存放在/sys/block/xvda/queue/nr_requests 文 ...

  6. Core 文件的简单学习

    背景 最近公司内经常出现jvm进程宕机的情况. 宕机之后没有产生jvm的dump文件.比如xxx.hprof 但是产生了 core.$pid的文件. 曾经在aarch64架构上宕机时曾经想学习一下co ...

  7. pytest-assume插件-多重校验

    自动化接口测试我们通常会对一条case设置多条断言,这样就会出现一个问题,如果前面一 个校验不通过,那么后面的校验就不会走到,如下图,可以看到校验走到assert False就不往 下走了,这个时候p ...

  8. git中git cherry-pick的使用

    git中git cherry-pick的使用 A分支是从远端的开发分支dev拉取的 B分支是从远端的测试分支rel拉取的 现在我们遇见一个问题. 我们在A分支修改了代码.并且推送到了远端的dev分支. ...

  9. 【代码分享】使用 avx512 + 查表法，优化凯撒加密

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 关于凯撒加密,具体请看:https://en.wikipe ...

  10. 手撕Vue-提取元素到内存

    接着上一篇文章,我们已经实现了构建Vue实例的过程,接下来我们要实现的是提取元素到内存. 主要是通过文档碎片来实现,文档碎片是一个轻量级的文档,可以包含和控制节点,但是不会像真实的DOM那样占用内存, ...