黑马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. Oracle---PL/SQL的学习

    PL/SQL程序 一.定义 declare 说明部分 begin 语句序列(DML语句) exception 例外处理语句 end; 二. 变量和常量说明 a) 说明变量(char,varchar2, ...

  2. 9.动态SQL

    动态 SQL,主要用于解决查询条件不确定的情况:在程序运行期间,根据用户提交的查 询条件进行查询. 提交的查询条件不同,执行的 SQL 语句不同.若将每种可能的情况均逐一 列出,对所有条件进行排列组合 ...

  3. redis系列二： linux下安装redis

    下面介绍在Linux环境下,Redis的安装与配置 一. 安装 1.首先上官网下载Redis 压缩包,地址:http://redis.io/download 下载稳定版3.0即可. 2.通过远程管理工 ...

  4. (6)python基础数据类型

    python的六大标准数据类型 (一)Number   数字类型(int float bool complex) (二)String 字符串类型 (三)List 列表类型 (四)Tuple 元组类型 ...

  5. java线程基础巩固---如何给你的应用程序注入钩子程序

    这次做一个比较有意思的实验,我们知道当一个程序如果抛异常了其程序肯定会挂掉,那有木有可能在程序异常退出时能执行一段咱们自己的代码,比如说服务器在异常退出时需要做一些额外的资源清理,像这种场景就正好是这 ...

  6. 【转】Everything you need to know about NoSQL databases

    原文: https://dev.to/lmolivera/everything-you-need-to-know-about-nosql-databases-3o3h ---------------- ...

  7. new函数

    可以通过new函数直接创建一个类型的指针 变量名:=new(Type) 使用new函数创建的指针已有指向,可以使用*指针对象进行赋值. func main() { a := new(int) fmt. ...

  8. 用idea操作svn

    使用SVN前提必须安装好服务端和客户端,或者知道服务端的url才能对服务器中的文件进行操作. 服务端:SVN service 客户端:TortoiseSVN 提交 第一步:确认SVN 服务器是否开启 ...

  9. [六省联考2017]分手是祝愿——期望DP

    原题戳这里 首先可以确定的是最优策略一定是从大到小开始,遇到亮的就关掉,因此我们可以\(O(nlogn)\)的预处理出初始局面需要的最小操作次数\(tot\). 然后容(hen)易(nan)发现即使加 ...

  10. 【CF1218E】Product Tuples

    题目大意:给定一个长度为 \(N\) 的序列,求从序列中选出 \(K\) 个数的集合乘积之和是多少. 题解: 由于是选出 \(K\) 个数字组成的集合,可知对于要计算的 \(K\) 元组来说是没有标号 ...