这个小案例主要时练习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. VPS建站

    参考腾讯云的教程 选择了 LAMP的方案,即Linux + Apache + MySQL + Php 参考链接 https://cloud.tencent.com/edu/learning/cours ...

  2. openGL常用对象的创建及使用

    一.GPU英文全称Graphic Processing Unit,中文翻译为“图形处理器”.GPU(显卡核心芯片)是显示卡的“大脑”,它决定了该显卡的档次和大部分性能 二.使用背景 随着OpenGL状 ...

  3. 封装 pyinstaller -F -i b.ico excel.py

    安装pywin32,可以参考<怎么给python安装pywin32模块?> 一定要注意对应的python版本,否则不能安装.   5怎么给python安装pywin32模块?   2 用命 ...

  4. vsto c# 获取word里面的图片并保存

    internal void GetEmbeddedImages() { ; Document doc = Globals.ThisAddIn.Application.ActiveDocument; f ...

  5. Test 6.29 T3 小学生

    问题描述 "不错,不错!那么,准备好迎接下一道题了么?"一道白光闪过,CJK 眼前出现了 1e100 个小学生."他们中,有一些人轨了我的机子.现在,我需要你在 1S 之 ...

  6. UVa 10054 : The Necklace 【欧拉回路】

    题目链接 题目大意:我的妹妹有一串由各种颜色组成的项链. 项链中两个连续珠子的接头处共享同一个颜色. 如上图, 第一个珠子是green+red, 那么接这个珠子的必须以red开头,如图的red+whi ...

  7. Web开发中的服务器跳转与客户端跳转

    两者比较如下: 跳转类型  客户端请求次数 服务端响应次数 URL变化 站外跳转 作用域 服务器跳转 1 1 无 否 pageContext.request.session.application 客 ...

  8. BZOJ 3930: [CQOI2015]选数 莫比乌斯反演 + 杜教筛

    求 $\sum_{i=L}^{R}\sum_{i'=L}^{R}....[gcd_{i=1}^{n}(i)==k]$   $\Rightarrow \sum_{i=\frac{L}{k}}^{\fra ...

  9. JavaScript点击事件——美女合集

    Js点击事件--美女合集 实例 效果如下图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  10. 升级至webpack4.x踩坑记（热更新局部更新失败的问题修复）

    零.前言 webpack升级的时候,会碰到各种个样的问题,大多数网上都能查到解决方案最简单的方案. 思路如下: 1.把css-loader,xxxloader等依赖都升级到最新 2.根据webpack ...