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. Web学习的第四天

    今天通过前面的学习,自己写了段代码. 今天还学习了列表,列表的分类有:无序列表.菜单列表.目录列表.有序列表.定义列表. 列表类型                     标记符号          ...

  2. cesium 之图层管理器篇（附源码下载）

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  3. （三）图数据库neo4j的安装配置

    (一)neo4j安装 neo4j有社区版本和企业版,社区版本是免费的,企业版本是收费的.在linux上安装如下步骤: 1.将下载的neo4j-enterprise-3.4.0-unix.tar.gz包 ...

  4. Windows Server 2016-Hyper-V HNV 新增功能

    本内容主要介绍了Hyper-V 网络虚拟化 (HNV) 功能在 Windows Server 2016 中的新增或更改内容,具体信息如下: HNV更新 功能中的功能 新的或改进 描述 可编程 Hype ...

  5. SVN的安装与配置

    单独安装 SVN:1.安装:yum -y install subversionmkdir -p /data/svn/ 创建创库目录svnadmin create /data/svn/repos 构建版 ...

  6. Node.js 事件循环机制

    Node.js 采用事件驱动和异步 I/O 的方式,实现了一个单线程.高并发的 JavaScript 运行时环境,而单线程就意味着同一时间只能做一件事,那么 Node.js 如何通过单线程来实现高并发 ...

  7. 在 ASP.NET Core 中使用 MySql 踩坑记录

    使用 Pomelo.EntityFrameworkCore.MySql 生成 MySQL 数据库 关于如何使用请查看项目文档即可 组件地址:https://github.com/PomeloFound ...

  8. 微擎where范围查询in

    where sale_time in($todayStart,$todayEnd)

  9. #Java学习之路——基础阶段二（第七篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  10. 【Spark篇】---SparkStreaming中算子中OutPutOperator类算子

    一.前述 SparkStreaming中的算子分为两类,一类是Transformation类算子,一类是OutPutOperator类算子. Transformation类算子updateStateB ...