前面九篇讲解了vue的一些基础知识，正所谓：学以致用，今天我们将用前九篇的基础知识，来模拟实现计算器的简单功能，项目价值不高，纯粹是为了加深掌握所学知识。

学前准备：

需要掌握JavaScript的eval()函数，其主要是用来计算某个字符串，并执行其中的 JavaScript 代码。

直接上代码（vue.min.js 第一篇有下载链接）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>计算器功能简单模拟</title>
  8.     <script type="text/javascript" src="js/vue.min.js"></script>
  9. </head>
  10. <body>
  11.     <!-- 页面代码 -->
  12.     <div id="app">
  13.         <input type="text" v-model="n1"/>
  14.         <select v-model="opt">
  15.             <option>+</option>
  16.             <option>-</option>
  17.             <option>*</option>
  18.             <option>/</option>
  19.         </select>
  20.         <input type="text" v-model="n2"/>
  21.         <button @click="equal">=</button>
  22.         <input type="text" v-model="result"/>
  23.     </div>
  24.  
  25.      <!-- js代码 -->
  26.     <script type="text/javascript">
  27.         var vm = new Vue({
  28.             el:"#app",
  29.             data:{
  30.                 n1:0,
  31.                 n2:0,
  32.                 opt:'-',
  33.                 result:0
  34.             },
  35.             methods:{
  36.                 equal(){
  37.                     var optStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
  38.                     this.result = eval(optStr);
  39.                 }
  40.             }
  41.         });
  42.     </script>
  43. </body>
  44. </html>

功能很简单，核心是利用双向数据绑定的原理，实现数据实时计算。n1和n2是参与计算的变量，result是计算结果，一开始都被初始化为0，操作符被初始化为减号，通过点击等于号button触发计算方法，计算的结果会被实时显示出来。计算方法中为了实现简单使用了eval()函数，其会把字符串解析出来，按照正常的计算逻辑计算结果。

每天进步一点点！

Vue学习之路第十篇：简单计算器的实现的更多相关文章

  1. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  2. Vue学习之路第十六篇：车型列表的添加、删除与检索项目

    又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...

  3. Vue学习之路第十四篇：v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  4. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  5. Vue学习之路第十九篇：按键修饰符的使用

    1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...

  6. Vue学习之路第十八篇：私有过滤器的使用

    1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...

  7. Vue学习之路第十五篇：v-if和v-show指令

    1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...

  8. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  9. Vue学习之路第七篇：跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

随机推荐

  1. WEBGL学习【十二】鼠标操作场景

    <!DOCTYPE HTML> <html lang="en"> <head> <title>Listing 7-3 and 7-4 ...

  2. Flex简易教程

      常见的前端布局模型涵盖浮动.定位和弹性盒等 CSS 技术,其中浮动和定位技术往往在制作自适应布局页面时显得不够优雅--对于浮动布局,前后端分离时代很多时候我们并不知道每行会遍历显示多少个元素,每个 ...

  3. BZOJ 3110 [ZJOI2013]K大数查询 (整体二分+线段树)

    和dynamic rankings这道题的思想一样 只不过是把树状数组换成线段树区间修改,求第$K$大的而不是第$K$小的 这道题还有负数,需要离散 #include <vector> # ...

  4. 用于检测进程的shell脚本

    用于检测进程的shell脚本 2010-07-07 10:38:08|  分类: Centos |字号 订阅 脚本一: #!/bin/sh program=XXXX     #进程名 sn=`ps - ...

  5. Python编程：从入门到实践 - matplotlib篇 - Random Flow

    随机漫游 # random_flow.py 随机漫游 import random class RandomFlow(): """一个生成随机漫游数据的类"&qu ...

  6. DOM中元素节点，属性节点，文本节点的理解

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...

  7. hibernate框架总结

    实体类编写规则1 实体类里面属性私有的 2 私有属性使用公开的set和get方法操作 3 要求实体类有属性作为唯一值(一般使用id值) 4 实体类属性建议不使用基本数据类型,使用基本数据类型对应的包装 ...

  8. codevs——T3657 括号序列

    http://codevs.cn/problem/3657/  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description ...

  9. 香蕉派 Banana pi BPI-M2 四核开源单板计算机.

     Banana PI BPI-M2 是一款四核高性能单板计算机,Banana PI BPI-M2是一款比树莓派更强悍的四核Android4.4产品. Banana PI BPI-M2兼容性强大,能 ...

  10. Ubuntu14.04.1安装搜狗拼音输入法

    之前在Ubuntu16.04下安装过搜狗,在印象中与这次遇到的问题不一样,因此先说明一下这次Ubuntu的版本号: 参考博客http://blog.csdn.net/tao_627/article/d ...