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. 关于css兼容性问题及一些常见问题汇总

    目前主流浏览器的兼容性做的都比较好了,本文主要针对IE6,7的不兼容问题进行解决. 1.圆盘时钟有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度. ...

  2. 【SQL Server】利用游标将学生表中的成绩转化为绩点

    软件工程综合实践第一次作业 代码来源:班上同学的数据库大作业 alter table sc add GPA float; --加入绩点列 alter table sc ,);--将表按原始位置顺序编号 ...

  3. SQL Server 查找统计信息的采样时间与采样比例

    有时候我们会遇到,由于统计信息不准确导致优化器生成了一个错误的执行计划(或者这样表达:一个较差的执行计划),从而引起了系统性能问题.那么如果我们怀疑这个错误的执行计划是由于统计信息不准确引起的.那么我 ...

  4. @Autowired注解警告Field injection is not recommended

    在使用spring框架中的依赖注入注解@Autowired时,idea报了一个警告 大部分被警告的代码都是不严谨的地方,所以我深入了解了一下. 被警告的代码如下: @Autowired UserDao ...

  5. ==运算符和equals()方法的区别

    Java语言程序中判断两个变量是否相等有两种方式:一是运用==运算符,二是运用equals方法. 1. ==运算符 对于==运算符来说,如果两个变量是基本类型的,并且是数值类型,则只要它们的值相等,就 ...

  6. CSS3D 转换调试

    css3d 测试工具 效果如图: 代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

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

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

  8. 一个简单的HTML5 Web Worker 多线程与线程池应用

    笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...

  9. 遍历 Map 的四种方法

    public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...

  10. 前端神器-神级代码编辑软件Sublime Text下载、使用教程、插件推荐说明、全套快捷键

    Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能 ...