<!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>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></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快速入门--14 使用v-model实现计算器的案例的更多相关文章

  1. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

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

  2. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

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

  4. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

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

  5. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

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

  6. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

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

  7. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

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

  8. 第二章 Vue快速入门--12 事件修饰符的介绍

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

  9. 第二章 Vue快速入门--10-11 跑马灯效果制作

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

随机推荐

  1. 【计算机视觉】time of flight （TOF）

    目录(?)[-] 11 TOF初探 12 TOF研究机构 13 TOF之应用领域 14 TOF相机特点 2 深度相机比较 1 MESA系列介绍 2 PMD Tec系列 3 NATAL 4 primeS ...

  2. prometheus 监控 jar应用服务 + 修改监听IP和端口

    1.修改服务的启动脚本 [root@do1cloud01 init.d]# vim learn-school nohup ${JAVA_HOME}/bin/java -javaagent:/usr/l ...

  3. 运用加密技术保护Java源代码（转）

    出处:运用加密技术保护Java源代码 为什么要加密? 对于传统的C或C++之类的语言来说,要在Web上保护源代码是很容易的,只要不发布它就可以.遗憾的是,Java程序的源代码很容易被别人偷看.只要有一 ...

  4. WPF——Application

    Application类处于WPF应用程序的最顶端,main函数就在这个类中. Application类的作用: 截图连接 https://docs.microsoft.com/zh-cn/dotne ...

  5. Qt5.8.0编译QtMqtt库并使用该库连接有人云的例子

    一 编译QtMqtt库Qt5.10才官方支持MQTT,但我用的Qt版本是5.8.0 Mingw_32BIT, 为了在Qt5.8.0上添加MQTT支持,需要自己编译源码 步骤: (1) git clon ...

  6. Java New IO

    1.NIO介绍 应用程序中,通常会涉及两种类型的计算:计算密集型和I/O密集型.对多数应用来说,花费在等待IO上的时间是比较大的.因此提高IO操作效率对应用的性能至关重要. 面向流的IO系统一次处理一 ...

  7. Java异常模块

    JAVA异常的捕获与处理 视频链接:https://edu.aliyun.com/lesson_1011_8939#_8939 java语言提供最为强大的支持就在于异常的处理操作上. 1,认识异常对程 ...

  8. DispatcherTimer和Timer的区别

    两者区别是 Timer在非UI线程跑的,DispatcherTimer是在UI线程跑的, DispatcherTimer 可以直接更新UI Timer必须使用this.Dispatcher.Begin ...

  9. Navicat连接CentOS7中的MariaDB

    Step 1:首先登录数据库设置开启远程连接 mysql -u root -p Step 2:使用改表法实现远程连接 use mysql; update user set host = '%' whe ...

  10. 【原创】大叔问题定位分享（35）spring中session失效时间

    spring项目中将sessionid对应的cookie过期时间设置很长,但是实际session还是在半个小时后失效,跟了一下代码,spring中session实现接口为 org.springfram ...