<!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. Spring IoC的形象化理解

    1.IoC(控制反转) 首先想说说IoC(Inversion of Control,控制反转).这是spring的核心,贯穿始终.所谓IoC,对于spring框架来说,就是由spring来负责控制对象 ...

  2. springboot使用elasticsearch的客户端操作eslaticsearch

    一  ES客户端 ES提供多种不同的客户端: 1.TransportClient ES提供的传统客户端,官方计划8.0版本删除此客户端. 2.RestClient RestClient是官方推荐使用的 ...

  3. centos 6.x下jira显示饼图乱码解决方法

    由于最近业务反馈jira出饼图时出现乱码现象,无法显示中文. 1. 由于平时用的yum源没有相关安装包,这里推荐暂时修改yum源如下: [epel] name=Extra Packages - $ba ...

  4. [转帖]判断Linux进程在哪个CPU核运行的方法

    判断Linux进程在哪个CPU核运行的方法   原文网址:http://www.embeddedlinux.org.cn/html/xinshourumen/201601/30-5013.html 问 ...

  5. 【Python】【demo实验29】【练习实例】【使用turtle画五角星】

    原题: 使用turtle画五角星: 我的代码: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- from turtle impor ...

  6. DOS bcp

    C:\>bcp /?用法: bcp {dbtable | query} {in | out | queryout | format} 数据文件  [-m 最大错误数]             [ ...

  7. redis5.0 数据结构与命令

    1.redis 支持如下5种数据结构 数据结构 说明 简介 String 字符串 key-val Hash 哈希 filed-val 映射表 List 列表 双向链表 Set 集合 element(元 ...

  8. Linux系列（3）：入门之正确的关机方法

    前言:在Windows(非NT主机系统)系统中,由于是单人假多任务的情况,所以即使你计算机关机,对于别人也没有丝毫影响!不过,在Linux下面,由于每个程序(或者服务)都是在在背景下执行,因此,在看不 ...

  9. Mysql中多表删除

    1.从MySQL数据表A中把那些id值在数据表B里有匹配的记录全删除掉 DELETE t2 FROM A t1,B t2 WHERE t1.id = t2.id DELETE FROM t2 USIN ...

  10. VC++ 窗口透明化及透明窗口上绘画、截图、轨迹

    源文件:https://files.cnblogs.com/files/MrFengD/Temp.rar