<!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. tomcat启动成功后访问却404

    1.检查是否把项目添加进tomcat,好久不用tomcat这次就犯了这种低级错误 2.检查路径,tomcat中的访问路径与项目中设置的路径是否一样,因为这次有些配置文件直接复制的源码,但源码中项目名称 ...

  2. leetcode971

    class Solution: def flipMatchVoyage(self, root, voyage): res = [] self.i = 0 def dfs(root): if not r ...

  3. Django return

    return HttpResponse("OK") 返回一个字符串 return redirect("/index/") 返回URL return render ...

  4. react源码第一天

    1.下载源码:github 16.7版本 2.找到笔记:https://react.jokcy.me/book/api/react.html#

  5. 深度学习实践-强化学习-bird游戏 1.np.stack(表示进行拼接操作) 2.cv2.resize(进行图像的压缩操作) 3.cv2.cvtColor(进行图片颜色的转换) 4.cv2.threshold(进行图片的二值化操作) 5.random.sample(样本的随机抽取)

    1. np.stack((x_t, x_t, x_t, x_t), axis=2)  将图片进行串接的操作,使得图片的维度为[80, 80, 4] 参数说明: (x_t, x_t, x_t, x_t) ...

  6. 使用spring-session共享springmvc项目的session

    一.说在前面 spring mvc项目,使用nginx,tomcat部署. 之前没做session共享,而nginx采用sticky模块进行分发. 但发现有时不能正确地指向同一台服务器,从而导致ses ...

  7. Java使用BigDecimal计算保留位数不对问题定位

    在项目中使用BigDecimal计算将单位从B换成TB时,算出来的结果总是整数,而没有保留设置的2位小数: 计算代码如下: db.divide(oneTB, ROUND_HALF_UP).setSca ...

  8. 面试常问MySQL性能优化问题

    知识综述: [1] MySQL中锁的种类: 常见的表锁和行锁,也有Metadata Lock等等,表锁是对一整张表加锁,分为读锁和写锁,因为是锁住整张表,所以会导致并发能力下降,一般是做ddl处理时使 ...

  9. 前端笔记-jquery

    一.什么是jquery 1.jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team 2.jQuery是继prototype之后又一个优秀的 ...

  10. MongoDB主从复制和副本集

    MongoDB有主从复制和副本集两种主从复制模式,主从复制最大的问题就是无法自动故障转移,MongoDB副本集解决了主从模式无法自动故障转义的特点,因此是复制的首选.对于简单的主从复制无法自动故障转移 ...