黑马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. 通过hadoop上的hive完成WordCount

    1.启动hadoop 打开所有命令:start-all.sh 2.Hdfs上创建文件夹 创建名为PGOne到user/hadoop 3.上传文件至hdfs 创建和修改508.txt文件,里面尽量多写一 ...

  2. PHP 求两个日期之间相差的天数、月数

    <?php /** * 求两个日期之间相差的天数 * (针对1970年1月1日之后,求之前可以采用泰勒公式) * @param string $day1 * @param string $day ...

  3. PPT 设置幻灯片母版

    现在我设计了一个PPT背景,我想新建幻灯片的时候,直接就是以这个背景展现,并把这个背景作用于左右的幻灯片. 1.选中第二页幻灯片,CTRL + C 复制一下 2.点击视图,幻灯片母版,背景样式,点击下 ...

  4. C#编程 LINQ查询

    LINQ查询表达式 约束 LINQ查询表达式必须以from子句开头,以select或group子句结束 关键字 from...in...:指定要查找的数据以及范围变量,多个from子句则表示从多个数据 ...

  5. CentOS 6.10 系统安装

    本章内容: CentOS 6.10 的安装 一.安装光盘,选择 Install or upgrade an existing system 二.选择 skip 跳过光盘检查 三.选择 Next 四.选 ...

  6. Ubuntu18.04安装OpenCV4.1.0

    Ubuntu18.04安装OpenCV4.1.0 1.首先要安装依赖 sudo apt-get install build-essential \ cmake git libgtk2.0-dev pk ...

  7. 三种方式构建C#单例模式

    /// <summary> /// 双检锁实现单例 /// </summary> public sealed class SingletonDoubleCheck { //s_ ...

  8. u-boot器件驱动模型（Device&Drivers）之uclass （转）

    一.剧情回顾 在上一篇链接器的秘密里面我们讲到我们用一些特殊的宏让链接器帮我们把一些初始化好的结构体列好队并安排在程序的某一个段里面,这里我例举出了三个和我们主题相关段的分布情况,它们大概如下图所示: ...

  9. Elasticsearch：运用scroll接口对大量数据实现更好的分页

    在Elasticsearch中,我们可以通过size和from来对我们的结果来进行分页.但是对于数据量很大的索引,这是有效的吗?Scroll API可用于从单个搜索请求中检索大量结果(甚至所有结果), ...

  10. vulkan asynchronous compute

    https://www.youtube.com/watch?v=XOGIDMJThto https://www.khronos.org/assets/uploads/developers/librar ...