<!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. Docker笔记——jdk镜像制作

    openjdk镜像依赖如下: openjdk:8-jdk -> buildpack-deps:jessie-scm -> buildpack-deps:jessie-curl -> ...

  2. 爬虫之scrapy

    一.项目简单流程 1.创建项目 scrapy startproject 项目名 2.创建Spider cd 项目名 scrapy genspider 爬虫名 域名 class YokaSpider(s ...

  3. Django建站+Vuejs前端

    第一节 @注意 千万注意格式.标签名字: 浏览器开发者模式修改页面不显示:在开发者模式下(F12进入),打开设置页面(F1),勾选 Disable cache (while DevTools is o ...

  4. 初次安装Ubuntu后的若干配置步骤

    第一步,安装VMware-tools 按照如下提示安装 首先将压缩包,复制到/home 目录下,将其解压,执行./vmware-install.pl即可 第二步,配置使linux能上网 首先将ubun ...

  5. sed的替换元字符的语法

    \(和\)用于保存正则表达式的一部分,而\1和\2用于保存回调的部分. 例如: 将sample.txt,内容如下 1...........55...........1010..........1010 ...

  6. 如何用Bat批处理自制自解压文件

    转载▼http://blog.sina.com.cn/s/blog_48462a890102e0nu.html     1.在桌面上新建一个文本文档,如:“新建 文本文档.txt”,方法是:在桌面的空 ...

  7. jquery选择器问题（找东西超级有用）

    $("[class='slider-container theme-green']").css('width','100%');就这么一行代码,很简单,这样就很容易找到唯一元素

  8. SVN命令行操作

    参考 https://wenku.baidu.com/view/511a7d29ed630b1c59eeb5f3.html 1, 将文件checkout到本地目录 svn check out http ...

  9. Java学习--数组--判断数组中是否包含某个元素的方法

    package zaLearnpackage; import org.apache.commons.lang3.ArrayUtils; import java.util.Arrays; import ...

  10. 【题解】洛谷 P1014 【Cantor表】

    1. 我们先引入三角形数的概念: >定数目的点或圆在等距离的排列下可以形成一个等边三角形,这样的数被称为三角形数. >古希腊著名科学家毕达哥拉斯把数1,3,6,10,15,21……这些数量 ...