知识点：

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. IBM jca 工具的学习与整理

    IBM jca 工具的学习与整理 背景 发现自己最早看到IBM这个工具的时间是 2022年9月份. 但是一直没有进行过仔细的学习与论证. 本周出现了一个问题. 虽然通过gclog明显看出来是一个oom ...

  2. [转帖]经典的 Fork 炸弹解析

    https://linux.cn/article-5685-1.html Jaromil 在 2002 年设计了最为精简的一个 Linux Fork 炸弹,整行代码只有 13 个字符(包括空格在内,空 ...

  3. [转帖]Linux：CPU频率调节模式以及降频方法简介

    概述 cpufreq的核心功能,是通过调整CPU的电压和频率,来兼顾系统的性能和功耗.在不需要高性能时,降低电压和频率,以降低功耗:在需要高性能时,提高电压和频率,以提高性能. cpufreq 是一个 ...

  4. [转帖]python中input()、print()用法

    https://www.cnblogs.com/lei3082195861/p/16967109.html 1.input()函数常涉及的强制类型转换 第一种是在键入时进行转换,例如:a = int( ...

  5. [转帖]网络传输性能netperf测试方法和下载

    简介 Netperf是一种网络性能的测试工具,主要针对基于TCP或UDP的传输.Netperf根据应用的不同,可以进行不同模式的网络性能测试,即批量数据传输(bulk data transfer)模式 ...

  6. [转帖]gcc -O0 -O1 -O2 -O3 四级优化选项及每级分别做什么优化

    相关博客http://blog.chinaunix.net/uid-24954950-id-2956476.html 相关博客http://blog.csdn.net/misiter/article/ ...

  7. [转帖]“高密度核心”的角逐 —— AMD Bergamo SoC & Zen 4c 前瞻

    https://zhuanlan.zhihu.com/p/585469720 最近这段时间一直在关注Bergamo和Zen 4c,但遗憾的是Genoa的发布会并没有提到太多的Bergamo细节.不过这 ...

  8. [转帖]docker编译speccpu2017

    实验步骤: 1.下载docker和speccpu2017 2.docker下载镜像,创建容器 3.将下载的宿主机speccpu2017拷贝到docker创建的容器中(docker cp) 4.在doc ...

  9. Springboot下micrometer+prometheus+grafana进行JVM监控的操作过程

    Springboot下micrometer+prometheus+grafana进行JVM监控的操作过程 背景 同事今天提交了一个补丁. 给基于Springboot的产品增加了micrometer等收 ...

  10. 文心一言 VS 讯飞星火 VS chatgpt （187）-- 算法导论14.1 4题

    四.用go语言,写出一个递归过程 OS-KEY-RANK(T,k),以一棵顺序统计树T和一个关键字k作为输入,要求返回 k 在由 T 表示的动态集合中的秩.假设 T 的所有关键字都不相同. 文心一言, ...