<!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. SQLServer 2008 已成功与服务器建立连接，但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时。

    在用SQL Server 2008 在连接其他电脑的实例时,一直提示“已成功与服务器建立连接,但是在登录前的握手期间发生错误. (provider: SSL Provider, error: 0 - ...

  2. arcgis10.2 sde配置

    本机配置好oracle11g server 64位+client 32位.

  3. orcal -学习准备

    格式化命令: 设置每行长度 SET LINESIZE 300; 设置每页长度 SET PAGESIZE 30; 使用文本编辑 文本编辑sql:ed aa 使用@aa 切换用户: CONN 用户名/密码 ...

  4. Python第9天

    迭代器(减少代码量增强可读性)和生成器(只能遍历一次):遵循迭代器协议,就是生成可迭代对象 生产者和消费者模型:可触发生成器运行的方法 直接调用next方法 用系统next+生成器的方法 send y ...

  5. gitlab api 使用

    api文档:https://docs.gitlab.com/ee/api/projects.html#project-visibility-level 1.项目查询 http://127.0.0.1: ...

  6. rsync 文件同步和备份

    rsync 是同步文件的利器,一般用于多个机器之间的文件同步与备份,同时也支持在本地的不同目录之间互相同步文件.在这种场景下,rsync 远比 cp 命令和 ftp 命令更加合适,它只会同步需要更新的 ...

  7. Hadoop Mapreduce运行流程

    Mapreduce的运算过程为两个阶段: 第一个阶段的map task相互独立,完全并行: 第二个阶段的reduce task也是相互独立,但依赖于上一阶段所有map task并发实例的输出: 这些t ...

  8. matplotlib绘图基本用法-转自（http://blog.csdn.net/mao19931004/article/details/51915016）

    本文转载自http://blog.csdn.net/mao19931004/article/details/51915016 <!DOCTYPE html PUBLIC "-//W3C ...

  9. jQuery之位置坐标图形相关方法

    jQuery实例方法-位置图形 位置坐标图形大小相关方法: .offset() .position() .scrollTop() ..scrollLeft() .width()..height() . ...

  10. cs架构与bs架构的对比

    主要区别: Client/Server是建立在局域网的基础上的.Browser/Server是建立在广域网的基础上的. 1．硬件环境不同 C/S 一般建立在专用的网络上, 小范围里的网络环境, 局域网 ...