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. vue 脚手架 立即可以写业务 vue + vue-router + less + axios + elementUI + moment

    https://github.com/cynthiawupore/wq-cli

  2. office365的开发者训练营，免费，在微软广州举办

    本活动在微软官网的地址: https://www.microsoft.com/china/events/detail_1707   先上活动内容:   Office 365每月有超过1亿的商业活跃用户 ...

  3. GridView 的简单应用

    gridView 是android一个控件主要是显示列似与九宫格这样的效果.废话不多说直接上代码. 首先是需要一个适配器来确定每一个里面的布局,在里面我自定义了一个点击事件,当点击图片布局的时候触发, ...

  4. #001 Python 00号作业：关于课程

    请大家继续思考,你希望我们的课程主要涉略哪些方面?你希望我们的课程能够带给你哪些基本的技能?你希望理论课应该怎么上,实验课应该怎么上?对于我们的课程有什么建议或意见 作为一名计算机专业的学生,对于py ...

  5. PHP Iterator迭代对象属性

    foreach用法和之前的数组遍历是一样的,只不过这里遍历的key是属性名,value是属性值.在类外部遍历时,只能遍历到public属性的,因为其它的都是受保护的,类外部不可见. class Har ...

  6. Vue+abp微信扫码登录

    最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...

  7. 《前端之路》之四 JavaScript 的闭包、作用域、作用域链

    04:JavaScript 的闭包 一.定义: 常规定义: 闭包的定义: 有权利访问外部函数作用域的函数. 通俗定义: 1.函数内部包含了函数.然后内部函数可以访问外部函数的作用域. 2.内部函数可以 ...

  8. 解决WebMagic抓HTTPS时出现SSLException

    访问我的博客 前言 在今年二月份在项目中引入了 WebMagic 技术,用来抓取合作方的书籍,详见之前文章:WebMagic之爬虫监控,这两天新接入了一个合作商,对方接口采取的是 HTTPS 协议,而 ...

  9. SLAM+语音机器人DIY系列：（三）感知与大脑——3.轮式里程计与运动控制

    摘要 在我的想象中机器人首先应该能自由的走来走去,然后应该能流利的与主人对话.朝着这个理想,我准备设计一个能自由行走,并且可以与人语音对话的机器人.实现的关键是让机器人能通过传感器感知周围环境,并通过 ...

  10. Python generator和yield介绍

    Python生成器(generator)并不是一个晦涩难懂的概念.相比于MetaClass和Closure等概念,其较为容易理解和掌握.但相对于程序结构:顺序.循环和分支而言其又不是特别的直观.无论学 ...