这个小案例主要时练习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. wireshare文件格式

    你用Wireshark打开这个pkt试试,如果可以打开,就说明Wireshark支持这种格式.然后你就可以去看Wireshark的源码.*.pkt是omnipeek/etherpeek的默认文件格式, ...

  2. nginx安装配置目录

    1.nginx日志轮转,用于lograte服务的日志切割. /etc/logrotate.d/nginx 2.cgi配置相关 /etc/nginx/fastcgi_params /etc/nginx/ ...

  3. Flutter-網絡請求

    Flutter 请求网络的三种方式 flutter 请求网络的方式有三种,分别是 Dart 原生的网络请求 HttpClient.第三方网络请求 http以及 Flutter 中的 Dio.我们可以比 ...

  4. bzoj1430 小猴打架 prufer 序列

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1430 题解 prufer 序列模板题. 一个由 \(n\) 个点构成的有标号无根树的个数为 \ ...

  5. css--图片整合（精灵图）

    图片整合(精灵图) 精灵图的优点: 减少图片的字节 减少了网页的http请求,从而大大的提高了页面的性能 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进 ...

  6. CSS--使用CSS Grid（网格）布局

    .一 CSS Grid(网格布局)简介 CSS Grid 布局由两个核心组成部分是父元素和子元素,父元素 是实际的 grid(网格),子元素是 grid(网格) 内的内容.下面是一个父元素和六个子元素 ...

  7. home home clock

    博客园添加home home clock 将下面代码复制进博客侧边栏广告即可 <div id="myTime"> <object classid="cl ...

  8. vue对特殊特性的研究

    key 预期:number | string key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes.如果不使用 key,Vue 会使用一种最大限度减少 ...

  9. [CF846A]Curriculum Vitae题解

    枚举一个点,假设它一定符合条件,据此珂以\(O(n)\)算出要删去几个点 于是就\(O(n^2)\)解决了,貌似加一个前缀和可以在\(O(n)\)的时间复杂度内解决本问题,但对于这个数据范围来说\(O ...

  10. [java] [error] java.lang.OutOfMemoryError: unable to create new native thread

    前言 最近公司的服务器出现了oom的报错,经过一番排查,终于找到了原因.写下这篇博客是为了记录下查找的过程,也是为了帮助那些跟我门遇到的情况相同的人可以更快的寻找到答案. 环境 系统:linux(ce ...