黑马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. 学习前端 第一天之html标签补充

    一.常用浏览器内核 Trident(IE内核) Gecko(firefox) webkit(Safari) Chromium/Blink(chrome) Blink(Opera) 二.常见标签回顾 a ...

  2. 0502 xss 实验

    0x01 dvwa xss(reflected) 1.1 Security Level: low use the typical <script>alert(1)</script&g ...

  3. C# webserver实现短信发送（移动）

    近端时间接了个需求在原来的OA办公系统中添加一个发送短信功能.(既然需要发送短信那肯定要申请一个发送短信的账号,我这里是以移动mas为列子) c#的weserver需要选协议WS.其他的基本不用怎么填 ...

  4. Java 程序员必备的一些流程图

    1.spring的生命周期 2.TCP三次握手,四次挥手 3.线程池执行流程图 4.JVM内存结构 5.Java内存模型 6.springMVC执行流程图 7.JDBC执行流程 8.spring cl ...

  5. 【uoj#94】【集训队互测2015】胡策的统计（集合幂级数）

    题目传送门:http://uoj.ac/problem/94 这是一道集合幂级数的入门题目.我们先考虑求出每个点集的连通生成子图个数,记为$g_S$,再记$h_S$为点集$S$的生成子图个数,容易发现 ...

  6. 第一篇.markdown

    目录 Day 01 1.markdown的使用感受 2.markdown的基本语法 2.1 标题 2.2 加粗 2.3 斜体 2.4 高亮 2.5 上标 2.6 下标 2.7 代码引用(>式) ...

  7. .net 调用 winapi获取窗口句柄和内容

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. Winform 多项目共用AssemblyInfo解决方案

    Winform 多项目共用AssemblyInfo解决方案: 操作步骤如下: 第一步:复制任何项目中的AssemblyInfo.cs文件至指定目录 第二步:删除所有项目的AssemblyInfo.cs ...

  9. 原生js为页面添加爱心特效和判断手机端还是电脑端登录

    <!-- 为页面添加爱心特效 --> <script type="text/javascript"> (function (window, document ...

  10. DataSnap初步二

    转:https://blog.csdn.net/a00553344/article/details/51670486 1. 一个典型的DataSnap服务器至少需要三个控件: TDSServer: D ...