<!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. 工厂/Builder，桥接/策略

    1.工厂 vs 抽象工厂 工厂方法模式: 用来加工.生产对象的类.比如说我想要一个汽车类,但是我总不能现场给你造个车出来对吧?于是我找到工厂类,然后工厂帮我把发动机型号选好,轮胎装好,油漆喷好,然后把 ...

  2. java中的逃逸分析

    逃逸分析 public static StringBuffer craeteStringBuffer(String s1, String s2) { StringBuffer sb = new Str ...

  3. 搭建数据库galera集群

    galera集群 galera简介 galera集群又叫多主集群,用于数据库的同步,保证数据安全 最少3台,最好是奇数台数,当一台机器宕掉时,因为仲裁机制,这台机器就会被踢出集群. 通过wsrep协议 ...

  4. css/js禁止点击元素

    css禁止点击页面元素,只需一句代码即可解决: pointer-events: none; 如果用js来控制的话那就是: $('#test').click(function(){ return fal ...

  5. 如何快速转载CSDN中的博客

    看到一篇<如何快速转载CSDN中的博客>,介绍通过检查元素→复制html来实现快速转载博客的方法.不过,不知道是我没有领会其精神还是其他原因,测试结果为失败.

  6. ELK7.3实战安装配置文档

    整体架构   一:环境准备 1.环境规划准备 192.168.43.16 jdk,elasticsearch-master ,logstash,kibana 192.168.43.17 jdk,ela ...

  7. element-ui入门

    element-ui入门 element-ui是一个ui库,它不依赖于vue.但是却是当前和vue配合做项目开发的一个比较好的ui框架. Layout布局(el-row.el-col) element ...

  8. springboot + thymeleaf静态资源访问404

    在使用springboot 和thtmeleaf开发时引用静态资源404,静态资源结如下: index.html文件: <!DOCTYPE html> <html xmlns:th= ...

  9. 转 Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数

    关于处理小数点位数的几个oracle函数() 1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select ...

  10. 痞子衡嵌入式：飞思卡尔i.MX RTyyyy系列MCU特性那些事（5）- 划时代新品RT1170

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的划时代新品i.MXRT1170. 自2017年开始,每年的6月25日恩智浦都会在北京举行微控制 ...