知识点：

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. [转帖]细说ASCII、GB2312/GBK/GB18030、Unicode、UTF-8/UTF-16/UTF-32编码

    参考: <编码标准-GB2312 GBK GB18030> <字符编码笔记:ASCII,Unicode 和 UTF-8> <字体编辑用中日韩汉字Unicode编码表> ...

  2. [转帖]【linux命令学习】— sar 命令学习

    https://blog.csdn.net/u013332124/article/details/101075521 一.命令使用介绍 sar命令全称 System Activity Report,它 ...

  3. [转帖]如何理解 kernel.pid_max & kernel.threads-max & vm.max_map_count

    https://www.cnblogs.com/apink/p/15728381.html 背景说明 运行环境信息,Kubernetes + docker .应用系统java程序 问题描述 首先从Ku ...

  4. [转帖]【VIM】多行缩进空格与删除

    向前或向后缩进一个TAB 按ctrl + v组合键进入Visual Line模式,可使用方向键选择多行: 按<或>,进行向前或向后缩进tab. 缩进n个TAB,按n+<或> 多 ...

  5. 【转帖】BGP:全穿透，半穿透，静态代播有什么区别

    一. 什么是BGP二. 具体实现方案2.1BGP的优点2.2 真伪BGP在使用效果上有什么差异​​​​​​​​​​​​​​2.2.1 真BGP实现了用户最佳路径的自动选择​​​​​​​​​​​​​​​ ...

  6. [转帖]Red Hat Enterprise Linux 8 和 9 中可用的 IO 调度程序

    Red Hat 弃用了 Red Hat Enterprise Linux 7 中可用的 I/O 调度程序,并引入了四个新的 I/O 调度程序,如下所示, 运行以下命令检查 RHEL8 和 RHEL9 ...

  7. [转帖]网卡多队列：RPS、RFS、RSS、Flow Director（DPDK支持）

    Table of Contents 多队列简介 RPS介绍(Receive Packet Steering) RFS介绍(Receive flow steering) RSS介绍(receive si ...

  8. 金蝶Cosmic虚拟机简单使用与总结

    背景 知己知彼 简单学习下友商发出来的测试软件 看看有否对自己现在的工作有所指导 也看看对方的部署方式有啥优缺点 当然了仅是测试, 不是生产软件可能有失真. 注意 我没有测试序列号, 登录系统耗时很久 ...

  9. elementui更改Slider 滑块颜色样式

    <div class="con-slider"> <el-slider :disabled="disabledFlag" @change=&q ...

  10. Redis做Mybatis的二级缓存

    Redis做mybatis的二级缓存 作用提升速度,保证多台服务器访问同一数据库时不会崩 注意:保证本地有下载redis且已经打开,否则无法使用. [本文只讲述了实现步骤,并没有原理讲解] 保证有导入 ...