<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <script src="./lib/vue.js"></script>

</head>

<body>

<div id="app">

    <input type="text" v-model="num1">

    <select v-model="opt">

        <option value="+">+</option>

        <option value="-">-</option>

        <option value="*">*</option>

        <option value="/">/</option>

    </select>

    <input type="text" v-model="num2">

    <input type="button" value="=" @click="cal">

    <input type="text" v-model="result">

</div>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            num1:0,

            num2:0,

            result:0,

            opt:"+"

        },

        methods:{

            cal(){

                switch (this.opt) {

                    case "+":

                        this.result = parseInt(this.num1) + parseInt(this.num2)

                        break;

                    case "-":

                        this.result = parseInt(this.num1) - parseInt(this.num2)

                        break;

                    case "*":

                        this.result = parseInt(this.num1) * parseInt(this.num2)

                        break;

                    case "/":

                        this.result = parseInt(this.num1) / parseInt(this.num2)

                        break;

                }

            }

        }

    })

</script>

</body>

</html>

vue实现简易计算器的更多相关文章

  1. Vue 制作简易计算器

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

  2. 黑马vue---15、使用v-model实现简易计算器

    黑马vue---15.使用v-model实现简易计算器 一.总结 一句话总结: 用v-model绑定了第一个数,第二个数,操作符,和结果,数据改变他们跟着变,他们变数据也跟着变 select v-mo ...

  3. 自制c#简易计算器

    这是一个课堂作业,我觉得作为一个简易的计算器不需要态度复杂的东西,可能还有一些bug,有空再慢慢加强. using System;using System.Collections.Generic;us ...

  4. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  5. PHP学习笔记02——简易计算器

    <!DOCTYPE html> <html> <head> <title>PHP简易计算器</title> </head> &l ...

  6. JavaScript之简易计算器

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  7. 菜鸟学习Struts——简易计算器

    这是学习Struts的一个简单的例子文件结构如下: 1.配置Struts环境 2.新建input.jsp,success.jsp,error.jsp input.jsp代码如下: <%@ pag ...

  8. Python之实现一个简易计算器

    自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...

  9. 使用HTML+CSS，jQuery编写的简易计算器

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. day 3 总结

  2. MOOC 数据库系统笔记（一）：初步认识数据库系统

    概述 什么是数据库 数据库是电子化信息的集合 数据库起源于规范化"表(Table)"的处理. Table:以按行按列形式组织及展现的数据. E.F.Codd,基于对"表( ...

  3. 0x7fffffff的意思

    7fffffff是8位16进制 每个16进制代表4个bit 8✖4bit=32bit=4Byte f的二进制为:1111,7的二进制位0111 int类型的长度位4Byte 左边起,第一位为符号位,0 ...

  4. BOM之window核心模块

    Window对象包含以下五大核心:document,screen,navigator,history,location. 一     document 文档 document包含了浏览器对标准DOM实 ...

  5. oracle异机恢复测试

    (一)问题背景 最近在生产环境中,开发人员误操作,使用truncate将oracle数据库某个表的数据全部删除了,在删除之后,开发人员发现自己闯祸了,于是联系值班的DBA进行紧急数据恢复. 经过分析, ...

  6. js初学总结

    基础 交换变量方式 //利用第三方变量进行交换 var num1 = 10; var num2 = 20; var temp; temp = num1; num1 = num2; num2 = tem ...

  7. Spring 梳理 - filter、interceptor、aop实现与区别 -第一篇

    前言 项目中我们经常需要对RESTful api进行拦截,主流实现方法有filter.interceptor.aop,先说一下他们各自的实现. Filter AnimalFilter实现javax.s ...

  8. rabbitmq linux卸载

    rabbitmq是运行在erlang环境下的,所以卸载时应将erlang卸载. 1.卸载rabbitmq相关 卸载前先停掉rabbitmq服务,执行命令 $ service rabbitmq-serv ...

  9. windows下查看进程及结束进程命令

    windows下查看进程及结束进程命令 1)查看占用8080端口的进程号 >netstat –aon | findstr “8080” 结果:TCP    0.0.0.0:8080        ...

  10. 死磕 java线程系列之自己动手写一个线程池

    欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. (手机横屏看源码更方便) 问题 (1)自己动手写一个线程池需要考虑哪些因素? (2)自己动手写 ...