<!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. 如何使用rsync备份

    已知3台服务器主机名分别为web01.backup .nfs主机信息见下表: 角色 外网IP(NAT) 内网IP(LAN) 主机名 WEB eth0:10.0.0.7 eth1:172.16.1.7 ...

  2. 48 (OC)* 适配iPad和iPhone、以及横竖屏适配。

    一:核心方法 1.三个方法 1.1:开始就会触发 - (void)viewWillLayoutSubviews; 1.2:开始就会触发 - (void)viewDidLayoutSubviews; 1 ...

  3. 01 (OC)* @property 后面可以有哪些修饰符？

    一:@property 后面可以有哪些修饰符? 1:线程安全的: atomic,nonatomic 2:访问权限的 readonly,readwrite 3:内存管理(ARC) assign, cop ...

  4. Docker笔记（十一）：Dockerfile详解与最佳实践

    Dockerfile是一个文本文件,包含了一条条指令,每条指令对应构建一层镜像,Docker基于它来构建一个完整镜像.本文介绍Dockerfile的常用指令及相应的最佳实践建议. 1. 理解构建上下文 ...

  5. 众咖云集的 PyCon 2019 上海站，大佬们都讲了啥

    9 月 21 号周六,我参加了 PyCon China 2019 上海站,这是每年一届的 Python 中国开发者大会. 今年的上海站比往年的阵容扩大很多,「流畅的 Python」作者.Flask 作 ...

  6. JavaScript之对象基础

    现实世界是由无数的事物或对象组成,事物都有各独特的属性和一些动作行为,一般我们可以通过事物的某些特征或行为动作描述它.JavaScript中也是如此,JavaScript对象是多个键值对的集合,键我们 ...

  7. 45道CSS基础面试题（附答案）

    1 .介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽 ...

  8. APP自動化測試腳本3

    package com.lemon.day01; import java.net.MalformedURLException; import java.net.URL; import java.uti ...

  9. 抓住那只牛！Catch That Cow POJ-3278 BFS

    题目链接:Catch That Cow 题目大意 FJ丢了一头牛,FJ在数轴上位置为n的点,牛在数轴上位置为k的点.FJ一分钟能进行以下三种操作:前进一个单位,后退一个单位,或者传送到坐标为当前位置两 ...

  10. Android Studio [Toast]

    ToastActivity.java package com.xdw.a122; import android.support.v7.app.AppCompatActivity; import and ...