<!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. 使用T2表中的值替换T1表的值

    描述:现在有两张表,T1由Key和Value两个字段,T2也有Key和Value两个字段 当T1中的Key在T2表中存在时,更新使用T2表中对用的Value 值替换T1中的VAlue update A ...

  2. 译 .NET Core 3.0 发布

    原文:<Announcing .NET Core 3.0> 宣布.NET Core 3.0 发布 很高兴宣布.NET Core 3.0的发布.它包括许多改进,包括添加Windows窗体和W ...

  3. 解决commBind: Cannot bind socket FD 18 to [::1]: (99) Cannot assign requested address squid

    最近玩squid主要是为了爬虫代理,但是使用docker搭建squid的时候发现,docker一直默认使用的 ipv6,但是squid使用ipv4,导致无法绑定,出现commBind: Cannot ...

  4. C语言入门-数据类型

    一.C语言的类型 整数:char.short.int.long.longlong 浮点型:float.double.long double 逻辑:bool 指针 自定义类型 类型有何不同 类型名称:i ...

  5. Tomcat下java普通类IO文件路径问题

    由于在windows和linux下文件路径的表示方式存在差异 而我们的项目大多是在windows下的eclipse中完成测试 然后部署到linux的tomcat服务器中 这个时候我们既不能把地址写死( ...

  6. js运动基础2（运动的封装）

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  7. python 关于excel弹窗——请注意,您的文档的部分内容可能包含了文档检查器无法删除的个人信息解决方法

    参考https://www.cnblogs.com/Jacklovely/p/6582732.html 这个问题的原因是由于工作簿包含宏.ActiveX控件等内容, 而Excel被设置为在保存文件时自 ...

  8. Java基础学习笔记(五) - 常用的API

    API介绍 概念:API 即应用编程程序接口.Java API是JDK中提供给我们使用的类说明文档,这些类将底层的代码实现封装.无需关心这些类是如何实现,只需要学习如何使用. 使用:通过API找到需要 ...

  9. Spring Boot （十三）： Spring Boot 整合 RabbitMQ

    1. 前言 RabbitMQ 是一个消息队列,说到消息队列,大家可能多多少少有听过,它主要的功能是用来实现应用服务的异步与解耦,同时也能起到削峰填谷.消息分发的作用. 消息队列在比较主要的一个作用是用 ...

  10. .NET Core 读取配置文件方式总结

    基于.NET Core的跨平台开发,配置文件与之前.NET Framework采用xml的config文件不同,目前主要是采用json文件键值对配置方式读取. 参考网上相关资料总结如下: 一.引入扩展 ...