知识点：

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. 【OpenVINO】基于 OpenVINO C# API 部署 RT-DETR 模型

      RT-DETR是在DETR模型基础上进行改进的,一种基于 DETR 架构的实时端到端检测器,它通过使用一系列新的技术和算法,实现了更高效的训练和推理,在前文我们发表了<基于 OpenVINO ...

  2. [转帖]Jmeter学习笔记（十）——元件的作用域和执行顺序

    https://www.cnblogs.com/pachongshangdexuebi/p/11582891.html jmeter是一个开源的性能测试工具,它可以通过鼠标拖拽来随意改变元件之间的顺序 ...

  3. [转帖]麒麟V10 arm 环境配置yum源

    # 进入yum源文件目录 cd /etc/yum.repos.d # 备份yum源文件 cp kylin_aarch64.repo kylin_aarch64.repo.bak # 修改源文件内容 v ...

  4. 【转帖】训练中文LLaMA大规模语言模型

    https://zhuanlan.zhihu.com/p/612752963?utm_id=0 https://github.com/CVI-SZU/Linly​github.com/CVI-SZU/ ...

  5. Python学习之七_input和print

    Python学习之七_input和print 摘要 python3 之后 函数必须带 () 了 因为我开始学习的比较晚, 所以准备Python3开始学起 前面主要是模仿别人的代码进行学习 后续慢慢学习 ...

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

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

  7. Linux下面rsync 实现 完全一致的同步方法

    1. 在某些特殊的linux机器上面, 比如龙芯后者是飞腾服务器,部分工具不太好用, 需要使用x86弄好之后进行同步过去, 这个时候scp 最简单但是网络流量非常大, 不如使用rsync, rsync ...

  8. [转贴]使用dbstart 和dbshut 脚本来自动化启动和关闭数据库

    使用dbstart 和dbshut 脚本来自动化启动和关闭数据库 https://www.cnblogs.com/snowers/p/3285281.htmldbshut 和 dbstart 使用db ...

  9. 【转载】Linux常用命令大全（非常全！！！）

    [转载]Linux常用命令大全(非常全!!!) https://www.cnblogs.com/purple5252/p/11870584.html Linux常用命令大全(非常全!!!) 最近都在和 ...

  10. 京东哥伦布即时设计平台ChatGPT落地实践

    一.平台介绍 即时设计平台是一个即时搭建c端楼层的开发平台,支持通过导入relay设计稿url完成Ui2Code,在此基础上完成前端可视化搭建,同时支持通过ChatGPT完成一句话需求,搭建后的楼层自 ...