<!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. 6.Sentinel源码分析—Sentinel是如何动态加载配置限流的？

    Sentinel源码解析系列: 1.Sentinel源码分析-FlowRuleManager加载规则做了什么? 2. Sentinel源码分析-Sentinel是如何进行流量统计的? 3. Senti ...

  2. 【python】requests模块初探（一）

    一.写在前面 Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完 ...

  3. [Spark] 00 - Install Hadoop & Spark

    Hadoop安装 Java环境配置 安装课程:安装配置 配置手册:Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04[依照步骤完成配置] jsk安装使用的链接中第 ...

  4. demo演示如何写一个无配置格式统一的日志

    一.背景 大量项目在使用logback记日志,有部分项目使用日志混乱,格式不统一,多数人搞不懂配置文件,导致配置错误,现在需要开发一套统一的.少配置的日志组件,方便使用. 二.设计思路 尽量采用0配置 ...

  5. 在vscode中配置python环境

    1.安装vscode和python3.7(安装路径在:E:\Python\Python37): 2.打开vscode,在左下角点击设置图标选择setting,搜索python path,在该路径下选择 ...

  6. 使用Storm实现累加求和操作

    package com.csylh; import org.apache.storm.Config; import org.apache.storm.LocalCluster; import org. ...

  7. mysql replace into使用

    使用mysql插入数据时,我们通常使用的是insert into来处理,replace into有时可以替代insert into功能,但replace into也有自己的用法 准备一张测试表: CR ...

  8. CentOS 安装lsof命令

    1.在控制台上输入:# yum install lsof,安装过程中按y进行确认 2.使用lsof -i :port 可以产看端口的进程信息

  9. python爬虫——爬取B站用户在线人数

    国庆期间想要统计一下bilibili网站的在线人数变化,写了一个简单的爬虫程序.主要是对https://api.bilibili.com/x/web-interface/online返回的参数进行分析 ...

  10. Python3 学习笔记之 变量/字符串/if/while/逻辑运算符/模块引用

    变量/if/while/逻辑运算符/模块引用: 变量: 使用变量前必须先赋值. 大小写区分. Python创建字符串,在字符串两边可以加上单引号或者双引号. 打印单引号或双引号,使用转移\ 使用\进行 ...