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

一、总结

一句话总结：

用v-model绑定了第一个数，第二个数，操作符，和结果，数据改变他们跟着变，他们变数据也跟着变

select v-model="opt"

1、eval取巧方式？

this.result = eval('parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)')

二、内容在总结中

 <!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="./lib/vue-2.4.0.js"></script>

 </head>

 <body>

   <div id="app">

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

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

   </div>

   <script>

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {

         n1: 0,

         n2: 0,

         result: 0,

         opt: '+'

       },

       methods: {

         calc() { // 计算器算数的方法

           // 逻辑：

           /* 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;

           } */

           // 注意：这是投机取巧的方式，正式开发中，尽量少用

           var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'

           this.result = eval(codeStr)

         }

       }

     });

   </script>

 </body>

 </html>
 

黑马vue---15、使用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. Python之实现一个简易计算器

    自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...

  4. PyQt5 简易计算器

    剩下计算函数(self.calculator)未实现,有兴趣的朋友可以实现它 [知识点] 1.利用循环添加按钮部件,及给每个按钮设置信号/槽 2.给按钮设置固定大小:button.setFixedSi ...

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

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

  6. 自制c#简易计算器

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

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

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

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

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

  9. JavaScript之简易计算器

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

随机推荐

  1. jQuery获取的dom对象和原生的dom对象有何区别

    js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合,所以说他们两者是不同的对象类型不等价 原生DOM对象转jQuery对象 var box = docu ...

  2. WCF和SOA的简介

    1 什么是SOA:面向服务架构(service oriented architecture),他属于一种组件架构模式.SOA追求的是服务提供方和服务使用方的高度解耦. 服务必须是自解释的,也就是说必须 ...

  3. appium-清空输入框的内容后，再次输入内容会回退最后两个字符串

    问题描述 有两个输入框,用户名和密码输入框 调用set_text方法,输入用户名 再次调用set_text方法,输入密码 清空用户名输入框的内容后,再次输入内容会回退最后两个字符串 出问题的代码 de ...

  4. Image Processing and Computer Vision_Review：A survey of recent advances in visual feature detection—2014.08

    翻译 一项关于视觉特征检测的最新进展概述——http://tongtianta.site/paper/56761 摘要 -特征检测是计算机视觉和图像处理中的基础和重要问题.这是一个低级处理步骤,它是基 ...

  5. Django阶段总结与Ajax

    一.路由控制 二.视图层 三.模板层 四.模型层.单表操作.多表操作 五.什么是ajax 一.路由控制 补充点(什么是web应用?) 网站:BS架构应用程序:B是浏览器  S:server(实现了ws ...

  6. ARM体系结构与编程读书笔记——处理器的寄存器

    ARM处理器共有37个寄存器,其中包括: 31个通用寄存器,包括程序计数器(PC)在内,寄存器都是32位: 6个状态寄存器,这些寄存器都是32位的,目前只使用了其中12位: 通用寄存器 可以分为下面3 ...

  7. 构建之法第二次作业【使用git和Vs实现四则运算】

    [相关信息] Q A GIT地址 git地址 GIT用户名 Lin-000 学号后五位 62501 博客地址 博客地址 作业链接 此次作业链接 1.项目需求 程序接收一个命令行参数 n,然后随机产生 ...

  8. java——maven依赖版本冲突

    博客:maven依赖jar包时版本冲突的解决

  9. Windows&Appium&Python自动化测试-环境搭建之安卓SDK

    一.摘要 本博文将详细讲述在Windows环境下的jdk安装.配置以及环境校验:安卓sdk安装.配置以及环境校验 二.安装包工具准备: jdk1.8.0(64 位) installer_r24.4.1 ...

  10. javascript弹出带文字信息的提示框效果

    // position of the tooltip relative to the mouse in pixel // <html><head><meta charse ...