这个小案例主要时练习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. Linux shell中自动完成登录

    在写shell脚本时,需要登录到不同的服务器上执行相关命令,在未建立信任之前如何批量操作. 1.ssh 首次登录服务器时会提示RSA key fingerprint输入yes/no,可以通过下面的方法 ...

  2. php中判断数组键值，array_key_exists和isset区别

    $arr = array('key' => NULL); if(isset($arr['key'])){ echo 'isset'; } else { echo 'unset'; } echo ...

  3. 学习python os commands socket模块

    import os print(os.getcwd()) #获取当前路径, 导包也是从这个路径下面才能找到 # os.chdir('./..') #返回上一级路径,再获取路径看看 # print(os ...

  4. 5.xml约束技术--------schema

    1.schema约束 (1)dtd语法:<!ELEMENT 元素名称 约束> (2)schema符合xml的语法,xml语句 (3)一个xml文件中只能有一个dtd,但是可以有多个sche ...

  5. python开发之virtualenv与virtualenvwrapper

    在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难. 此时,我们需要对于不同的工程使用 ...

  6. hdu 4641K-string SAM的O(n^2)算法 以及 SAM+并查集优化

    转载:http://www.cnblogs.com/hxer/p/5675149.html 题意:有一个长度为n(n < 5e4)的字符串,Q(Q<=2e5)次操作:操作分为:在末尾插入一 ...

  7. navigator.userAgent.toLowerCase();判断浏览器做兼容

    js简单实例: var ua = navigator.userAgent.toLowerCase(); if (/android/.test(ua)) { $('.date>div>img ...

  8. POJ - 3481 splay板子

    Double Queue 默写splay板子 很多细节问题... #include<cstdio> #include<iostream> using namespace std ...

  9. [CSP-S模拟测试]:嘟嘟噜（约瑟夫问题）

    题目描述 由于众所周知的原因,冈部一直欠真由理一串香蕉.为了封上真由理的嘴,冈部承诺只要真由理回答出这个问题,就给她买一车的香蕉:一开始有$n$个人围成一个圈,从$1$开始顺时针报数,报出$m$的人被 ...

  10. html5: postMessage解决跨域通信的问题

    效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin ...