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. CODING 研发管理系统上线全球加速，助力企业跨区域协作

    CODING 研发管理系统现已全面支持全类型代码仓库的 全球加速访问. 随着国内互联网红利的日趋枯竭与全球互联网的加速普及.越来越多的企业开始走出国门,将目光投向全世界,搭建跨国体系.跨出国门的中国企 ...

  2. 我是如何自学 Python 的

    不少初学 Python 或者准备学习 Python 的小伙伴问我如何学习 Python.今天就说说我当时是怎么学习的. 缘起 我大学专业是电气工程,毕业后做的是自动化方面的工作.对于高级语言编程基本是 ...

  3. 简单读！zookeeper单机模式的启动逻辑

    zk用处如此之多,以至于每个地方都要你理解zk原理! 请按如下操作姿势打开: 1. 打开zk的git仓库地址:https://github.com/apache/zookeeper , 确认过眼神,它 ...

  4. 我眼中的 Nginx（二）：HTTP/2 dynamic table size update

    张超:又拍云系统开发高级工程师,负责又拍云 CDN 平台相关组件的更新及维护.Github ID: tokers,活跃于 OpenResty 社区和 Nginx 邮件列表等开源社区,专注于服务端技术的 ...

  5. kubernetes系列12—二个特色的存储卷configmap和secret

    本文收录在容器技术学习系列文章总目录 1.configmap 1.1 认识configmap ConfigMap用于保存配置数据的键值对,可以用来保存单个属性,也可以用来保存配置文件.ConfigMa ...

  6. Hexo优化 | 创建sitemap站点地图并向Google提交

    前言 站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知Google和其他搜索引擎.Sitemap 可方便管理员通知搜索引擎他们网站上有哪些可供抓取的网页.搜索引擎 ...

  7. C# ADO.NET的SqlDataReader对象,判断是否包含指定字段

    在使用ado.net的SqlDataReader对象时,如果SqlDataReader实例对象中没有对应的字段,则会在那一行报错.而SqlDataReader类又没有判断是否存在指定字段的方法,怎么办 ...

  8. webservice创建、部署和调用

    webservice 可以用于分布式应用程序之间的交互,和不同程序之间的交互. 下面通过一个简单的例子来创建一个webservice,用的是vs2010开发工具 首先创建一个web应用程序 接着我们添 ...

  9. 【开源分享】微信营销系统（第三方微信平台）github 开源

    升讯威微信营销系统(微信第三方平台) 在线体验:http://wxcm.eeipo.cn/开源地址GitHub:https://github.com/iccb1013/Sheng.WeixinCons ...

  10. MySql给表添加列和注释

    1.给表添加列 ALTER TABLE supplier_seller ADD COLUMN company_id INT NULL COMMENT '供应主体id'; 默认情况下,添加的列会添加到最 ...