这个小案例主要时练习v-model的使用，功能并不完善

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

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

        <select v-model="opt">

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

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

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

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

        </select>

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

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

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

    </div>

    <script>

        // 创建 Vue 实例，得到 ViewModel

        var vm = new Vue({

            el: '#app',

            data: {

                n1: 0,

                n2: 0,

                result: 0,

                opt: '+'

            },

            methods: {

                calc(){ // 计算器算数的方法

                    // 逻辑：

                    switch(this.opt){

                        case '+':

                            this.result = parseInt(this.n1) + parseInt(this.n2);

                            break;

                        case '-':

                            this.result = parseInt(this.n1) - parseInt(this.n2);

                            break;

                        case '*':

                            this.result = parseInt(this.n1) * parseInt(this.n2);

                            break;

                        case '/':

                            this.result = parseInt(this.n1) / parseInt(this.n2);

                            break;

                    }

                }

            }

        });

    </script>

</body>

</html>

VUE小案例--简易计算器的更多相关文章

  1. vue小案例--简易评论区

    一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...

  2. 微信小程序-简易计算器

    代码地址如下:http://www.demodashi.com/demo/14210.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式

    代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...

  4. Vue小案例（一）

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...

  5. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  6. Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由

    一.前言 this.$router.go(-1)返回上级路由 二.主要内容 1.小功能演示: 2.组件之间的嵌套关系为: 3.具体实现 (1)由于这种返回按钮在每个页面中的结构都是一样的,只是里面的数 ...

  7. 微信小程序 - 实战小案例 - 简易记事本

    多项技能,好像也不错.学习一下微信小程序. 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 简介:一套用来开发在手机微信上运行的app框架,不用安装 组成: ...

  8. Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能

    一.前言         1.用vuex实现加入购物车操作 2.购物车详情页面          3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src ...

  9. Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

随机推荐

  1. 五、Ubuntu 16.04 安装PyCharm

    方法一,在终端用指令通过第三方源安装pycharm. 本文通过第三方源安装PyCharm,好处是升级方便. 添加源:    $ sudo add-apt-repository ppa:mystic-m ...

  2. CF527E Data Center Drama

    链接CF527E Data Center Drama 题目大意:给你一个无向图,要求加最少的边,然后给这些无向图的边定向,使得每一个点的出入度都是偶数. \(n<=10^5,n\leq 2*10 ...

  3. toj 4063 单词(AC自动机)

    题目: 小张最近在忙毕设,所以一直在读论文.一篇论文是由许多单词组成的. 但小张发现一个单词会在论文中出现很多次,他想知道每个单词分别在论文中出现了多少次. 输入 第一行一个整数N,表示有N个单词.接 ...

  4. 【leetcode】1029. Two City Scheduling

    题目如下: There are 2N people a company is planning to interview. The cost of flying the i-th person to ...

  5. TreeMap定制排序和自然排序

    TreeMap定制排序和自然排序自然排序是实现Comparable接口的方法.代码如下: @Override public int compareTo(Object o) { if (o instan ...

  6. CentOS下安装Chrome浏览器中文显示为方框

    执行如下三条命令 yum groupinstall "X Window System" -y yum -y groupinstall chinese-support yum -y  ...

  7. 【HDOJ6681】Rikka with Cake（扫描线，线段树）

    题意:给定一个n*m的平面,有k条垂直或平行的直线,问将平面分成了几个互不联通的部分 n,m<=1e9,k<=1e5 思路: 刻在DNA里的二维数点 #include<bits/st ...

  8. Linux（RHEL7）下安装vsftp服务

    1.安装vsftp(没有配置yum源的先配置yum源) yum install -y vsftpd 2.启动ftp服务 systemctl start vsftpd.service 3.打开防火墙 f ...

  9. EZOJ #361地理

    分析 就是分别维护l和r的个数 然后对于询问区间[L,R] 之后l树状数组中小于等于R的个数减掉r树状数组中小于L的即可 代码 #include<bits/stdc++.h> using ...

  10. docker 部署ftp

    1.搜索ftp镜像 docker search vsftpd 2.拉取ftp镜像 docker pull fauria/vsftpd 3.启动ftpdocker docker run -d -v /h ...