知识点：

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. [转帖]天行健，国产CPU当自强不息

      https://baijiahao.baidu.com/s?id=1699201892754975586 本页面的文字和图像允许在CC-BY-SA 3.0协议四和GNU自由文档许可证下修改和再使用 ...

  2. [转帖]新一代垃圾回收器ZGC的探索与实践

    1. 引入 1.1 GC之痛 很多低延迟高可用Java服务的系统可用性经常受GC停顿的困扰. GC停顿指垃圾回收期间STW(Stop The World),当STW时,所有应用线程停止活动,等待GC停 ...

  3. Oracle 高版本导出到低版本的测试验证

    今天验证Oracle 由高版本 备份恢复到低版本 与方神沟通(双 还是他) 说可以使用 version的参数..然后搞一下.. expdp system/Test6530@ora12cr2 schem ...

  4. ElasticSearch降本增效常见的方法 | 京东云技术团队

    Elasticsearch在db_ranking 的排名不断上升,其在存储领域已经蔚然成风且占有非常重要的地位. 随着Elasticsearch越来越受欢迎,企业花费在ES建设上的成本自然也不少.那如 ...

  5. css水平居中的5种几种方式

    元素水平居中的第一种方式 子元素不需要宽度也可以 <div class="box"> <div class="son"> 我是内容 &l ...

  6. 在web中，用户输入的文字过多 和页面排版一行显示不下 怎么办

    在写管理系统中, 如果用户在input中,表单输入过多,应该如何去处理 常用的解决办法是: 1==>用户只能够输入一定范围内的字数 2==>超出几个字后(宽度)使用省略号显示. 3==&g ...

  7. 【JS 逆向百例】PEDATA 加密资讯以及 zlib.gunzipSync() 的应用

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...

  8. 每日一库：使用Viper处理Go应用程序的配置

    在开发Go应用程序时,处理配置是一个常见的需求.配置可能来自于配置文件.环境变量.命令行参数等等.Viper是一个强大的库,可以帮助我们处理这些配置. 什么是Viper? Viper是一个应用程序配置 ...

  9. P1962 斐波那契数列(矩阵快速幂)

    #include<bits/stdc++.h> #define int long long using namespace std; int n,a[3],m=1e9+7,c[3][3], ...

  10. # 重要-即时通讯IM开源项目OpenIM关于版本管理及v2.3.0发布计划

    越来越多的客户把OpenIM用到了生产环境,由于新特性持续迭代和bug修复,会涉及到后续的升级方案,为了让大家后续从容应对,本文重点总结OpenIM对未来版本管理的思路和方案.同时,官网对于文档进行了 ...