<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>简易计算器</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.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" @click="calc1" value="=">

  <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;

        }

    },

      calc1(){

      var codeStr = 'parseInt(this.n1) ' + this.opt + 'parseInt(this.n2)';

        this.result =eval(codeStr);

      }

  }

})

</script>

</body>

</html>

Vue 制作简易计算器的更多相关文章

  1. vue实现简易计算器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  3. 大一C语言学习笔记（10）---编程篇--制作简易计算器，支持加，减，乘，除，取余运算，要求 0 bug

    博主自开学初就一直在努力为自己的未来寻找学习方向,学习编程嘛,尽量还是要抱大腿的,所以我就加入了我们学校的智能设备研究所,别的不说,那的学长们看起来是真的很靠谱,学长们的学习氛围也超级浓厚,所以我就打 ...

  4. 基于vue制作简易的柱状图

    一般很常见的柱状图,大家都想到用百度echart,如果整个项目就只绘制仅有的一个柱状图,引入echart就有点大材小用了,哈哈哈. 预览地址:https://zuobaiquan.github.io/ ...

  5. 制作简易计算器处理结果Servlet

    ResultServlet.java: package com.you.servlet; import java.io.IOException; import java.io.PrintWriter; ...

  6. 制作简易计算器处理过程Servlet

    CalculationServlet.java: package com.you.servlet; import java.io.IOException; import java.io.PrintWr ...

  7. 利用Unity3D制作简易2D计算器

    利用Unity3D制作简易2D计算器 标签(空格分隔): uiniy3D 1. 操作流程 在unity3DD中创建一个新项目 注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本 在新建 ...

  8. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

  9. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. Python第6天

    主要内容: 递归:函数在内部自己调用自己,它的作用域没有return默认返回none 匿名函数 lambda ,与def的区别在于def可自行处理成元组,而lambda不行, func = lambd ...

  2. 【jira】java.lang.OutOfMemoryError: GC overhead limit exceeded

    登录JIRA访问打开缓慢,查询日志出现下述提示:java.lang.OutOfMemoryError: GC overhead limit exceeded 修改setenv.sh文件中的JVM配置, ...

  3. 从 TFS 迁移源代码到 git

    准备工具: https://github.com/git-tfs/git-tfs 具体的安装步骤上面的 readme.md 中有说明.通过 Chocolatey 安装,如果本地没有 git ,会自动安 ...

  4. python学习Day11 函数的参数列表

    复习 什么是函数? 具体特定功能的代码块 - 特定功能代码作为一个整体,并给该整体命名,就是函数 函数的优点 : 1.减少代码的冗余,2.结构清晰,可读性强 3.具有复用性,开发效率高,维护成本高 如 ...

  5. File重要获取功能

    返回值全是数组 String[] list() 返回当前路径下所有的文件和文件夹名称 注:只有指向文件夹的File对象才可以调此方法,如果只是文件则报错 File f = new File(" ...

  6. file常用功能

    构造方法 File(String pathname):将指定的路径名转换成一个File对象 File f = new File("D:\\a\\b.txt"); File(Stri ...

  7. Python学习—框架篇之初识Django

    什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有的W ...

  8. Windows内核开发之串口过滤

    学习了几个月的内核编程,现在对Windows驱动开发又了更加深入的认识,特别是对IRP的分层处理逻辑有了深入认识. 总结起来就几句话: 当irp下来的时候,你要根据实际情况,进行处理 1> 无处 ...

  9. windows内核驱动内存管理之Lookaside使用

    Windows内存管理中使用了类似于容器的东西,叫做Lookaside对象,每次程序员申请内存都会从Lookaside里面申请,只有不足的时候,Lookaside才会向内存又一次申请内存空间,这样减少 ...

  10. JS-jquery对象和dom对象的属性操作区别

    <label class="">时间1</label> <label class="">时间2</label> ...