v-model用于数据的双向绑定。bug不少，凑合看吧，主要是练习v-model。

<!DOCTYPE html>

<html lang="en">

<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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- v-model 双向绑定数据 -->

        <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="cal">

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

    </div>

</body>

<script>

    let vm = new Vue({

        el: '#app',

        data: {

            n1: 0,

            n2: 0,

            result: 0,

            opt: '+'

        },

        methods: {

            cal(){

                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>

</html>

Vue.js03：v-model实现简易计算器的更多相关文章

  1. Vue 制作简易计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. vue实现简易计算器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

  4. 黑马vue---15、使用v-model实现简易计算器

    黑马vue---15.使用v-model实现简易计算器 一.总结 一句话总结: 用v-model绑定了第一个数,第二个数,操作符,和结果,数据改变他们跟着变,他们变数据也跟着变 select v-mo ...

  5. 自制c#简易计算器

    这是一个课堂作业,我觉得作为一个简易的计算器不需要态度复杂的东西,可能还有一些bug,有空再慢慢加强. using System;using System.Collections.Generic;us ...

  6. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  7. PHP学习笔记02——简易计算器

    <!DOCTYPE html> <html> <head> <title>PHP简易计算器</title> </head> &l ...

  8. JavaScript之简易计算器

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  9. 菜鸟学习Struts——简易计算器

    这是学习Struts的一个简单的例子文件结构如下: 1.配置Struts环境 2.新建input.jsp,success.jsp,error.jsp input.jsp代码如下: <%@ pag ...

随机推荐

  1. WebStorm出现中文乱码解决代码

    今天用WebStorm运行html代码时,出现中文乱码,试了Settings里File Encodings,将编码形式改为utf-8,结果还是不行. 最后用代码解决了问题,代码如下: <meta ...

  2. 怎么让DIV在另一个DIV里靠底部显示？

    可以使用css的position属性的绝对定位. 拓展知识 position 属性指定了元素的定位类型. position 属性的五个值: static:HTML元素的默认值,即没有定位,元素出现在正 ...

  3. SharePoint布局页引用（实战）

    分享人:广州华软 极简 一. 前言 SharePoint 布局页可使用在任何可引用页面布局的页面,学会在页面直接引用页面布局,可实现无代码形式修改页面.此文讲述2种常用使用页面布局方式.本文适用于初学 ...

  4. openlayers4 入门开发系列之图层控制（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. 第六周LINUX学习笔记

    DNS服务 DNS:Domain Name Service //协议     实现:BIND(Berkeley Internet Name Domain)     监听端口:        UDP:5 ...

  6. Windows Server 2016-客户端加域准备工作

    今天我们简单归总下客户端加域的先决条件或着说准备工作,方便新手或者管理员日常加域失败排错等内容,希望可以帮到大家. 一.网络准备:(保证客户端与域控解析与网络通信正常) DHCP模式:DHCP已指定域 ...

  7. widows10 安装1803 版本后不能访问网络上的机器解决方法

    安装Windows10 1803 版本后,发现网络上的机器好多不见了. 使用 ping  可以ping 通,但是访问网络共享提示下面错误. 这个原因是1803 中没有安装 SMB1.0 协议.因为 S ...

  8. 面试题解：输入一个数A，找到大于A的一个最小数B，且B中不存在连续相等的两个数字

    玄魂工作室秘书 [玄魂工作室]      昨天发的算法有一处情况没考虑到,比如加一后有进位,导致又出现重复数字的情况,修正后今天重新发一次.     比如输入99,那B应该是101 因为100有两个连 ...

  9. SUSE12SP3-Zookeeper安装

    直接使用root账号 1.zookeeper安装 将zookeeper-3.4.13.tar.gz安装包放置指定目录 sudo tar -zxvf zookeeper-3.4.13.tar.gz -C ...

  10. Vue(day6)

    一.webpack中常用的文件loader & 插件 由于版本存在变动,以下安装和配置都有可能发生变化,请以官方文档为准. 1.html-webpack-plugin插件 html-webpa ...