<!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. zk hdfs hadoop yarn hive 学习笔记

    如图

  2. jersey 用FastJson替换掉默认的Jackson

    @Bean public ResourceConfig resourceConfig() { ResourceConfig resourceConfig = new ResourceConfig(); ...

  3. signalR客户端调用服务端方法失败

    现象: 在VS中修改集线器代码后,重新生成解决方案,客户端js调用服务端方法提示undefined. 检查后台代码未发现错误. 检查js代码未发现错误(方法名称符合小驼峰规范). 解决方法: 先清理解 ...

  4. PowerDesigner工具将表字段转成java实体

    首先将数据库的表导出为SQL文件.下载安装PowerDesigner工具. 下面以图文的形式讲解: 图   (1) 图   (2) 图   (3) 图   (4) 图   (5) 图   (6) 图 ...

  5. shardingsphere多数据源（springboot + mybatis+shardingsphere+druid）

    org.springframeword.boot:spring-boot-starer-web: 2.0.4release io.shardingsphere:sharding-jdbc-spring ...

  6. 源码解析之ConcurrentHashmap

    ConcurrentHashmap算是我看的集合源码里最难理解的了(当然ConcurrentLinkedList虽然代码少但理解起来也累),在Java1.8版本中DougLea大师巧通过妙地代码把锁粒 ...

  7. Redis和Memchaed缓存数据查询

    使用TreeNMS数据库管理工具 支持Redis和Memchaed并存同时管理维护,支持集群管理,减少运维成本,提高工作效率 自带环境,免安装.免布署,下载解压即可使用.适用于windows,Linu ...

  8. 【CPU微架构设计】分布式多端口（4写2读）寄存器堆设计

    寄存器堆(Register File)是微处理的关键部件之一.寄存器堆往往具有多个读写端口,其中写端口往往与多个处理单元相对应.传统的方法是使用集中式寄存器堆,即一个集中式寄存器堆匹配N个处理单元.随 ...

  9. python的bit_length方法

    bit_length方法作用是得到指定数值的二进制的长度数.宽度数 举例: age=1 v=age.bit_length() print(v) 返回结果: 1    #数值1对应的二进制是1,长度1位 ...

  10. Json常用代码

    以下使用的都是fastJson. 先创建Person类,如下: public class Person { @JSONField(name = "AGE") private int ...