黑马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. js重点——作用域——内部原理(二)

    本篇是深入分析和理解作用域的第一篇——内部原理和工作模型. 我们知道作用域是变量,对象,函数可访问的一个范围.这说明了我们需要一套良好的规则来存储变量,之后方便查找.所以我们首先要理解的是在哪里而且怎 ...

  2. js之数据类型（对象类型——构造器对象——日期）

    Date对象是js语言中内置的数据类型,用于提供日期与时间的相关操作.学习它之前我们先了解一下什么是GMT,什么时UTC等相关的知识. GMT: 格林尼治标准时间(Greenwich Mean Tim ...

  3. js模糊查询案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML导航条的制作

    导航条的制作HTML代码:<nav> <ul> <li> <a href="#"></a> </li> &l ...

  5. 设置自己的bat运行文件-自己用，随时扩展

    start "" "E:\SEST_H5" start "" "C:\Program Files\Sublime Text 3\s ...

  6. FlowPortal BPM 安装环境的配置

    l  操作系统:Windows Server 2003 及以上: l  IIS: 在Internet信息服务(IIS)管理器中将ISAPI和CGI限制全部设为“允许” l  需要安装.Net Fram ...

  7. 使用pycharm 编写代码 并在远程主机上运行

    一 要求 远程主机有python解释器 二 在菜单栏,File -> Settings… -> Project ×× -> Project Interpreter,点击右侧 Add按 ...

  8. JavaSpring【四、Bean管理注解实现】

    前面讲的Bean相关配置全部是使用xml配置文件或实现接口来实现的,接下来将比较常用的用法,使用注解实现bean的注入和管理 内容包括 ClassPath扫描与组件管理 类的自动检测与注册bean c ...

  9. EasyUI+JSP之java读取数据库后JSON格式数据的返回及调用

    做作业工程中遇到一些问题,特此记录一下 解决的问题:使用EasyUI框架搭建简单学生管理系统(数据库增删改查)操作时配合JSP,不知道如何把从数据库获得的数据封装成JSON格式并传回前端JSP并进行展 ...

  10. shell脚本基础编写

    shell脚本的格式 名称:Shell 脚本文件的名称可以任意,但为了避免被误以为是普通文件,建议将 .sh 后缀加上,以表示是一个脚本文件. shell 脚本中一般会出现三种不同的元素: 第一行的脚 ...