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

学前准备：

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

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

<!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>计算器功能简单模拟</title>

    <script type="text/javascript" src="js/vue.min.js"></script>

</head>

<body>

    <!-- 页面代码 -->

    <div id="app">

        <input type="text" v-model="n1"/>

        <select v-model="opt">

            <option>+</option>

            <option>-</option>

            <option>*</option>

            <option>/</option>

        </select>

        <input type="text" v-model="n2"/>

        <button @click="equal">=</button>

        <input type="text" v-model="result"/>

    </div>

     <!-- js代码 -->

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                n1:0,

                n2:0,

                opt:'-',

                result:0

            },

            methods:{

                equal(){

                    var optStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';

                    this.result = eval(optStr);

                }

            }

        });

    </script>

</body>

</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. Codeforces Round #471 (Div. 2)A. Feed the cat

    After waking up at hh:mm, Andrew realised that he had forgotten to feed his only cat for yet another ...

  2. git入坑随笔

    一直以来,都喜欢用git做版本管理,主要涉及平台是coding, github以及公司自己搭建的gitlab. 因为一直以来都是自己一个人维护前端的项目,所以基本上很少有冲突的情况.(手动微笑 :) ...

  3. Anaconda安装tensorflow遇到的问题（转）

    tensorflow安装教程 1.找不到Anaconda Prompt 其他教程中说AnacondaPrompt在安装的Anaconda文件夹下面(如D:/Anaconda),但是我在安装中没有找到, ...

  4. 【CodeForces 574B】Bear and Three Musketeers

    [链接] 我是链接,点我呀:) [题意] [题解] 枚举每一条边(x,y) 然后再枚举y的出度z 看看g[x][z]是否等于1(表示联通) 如果等于1就说明找到了一个三元环,则尝试用它们的出度和-6更 ...

  5. SpringMVC的DispatcherServlet加载过程

    首先在web.xml中配置容器启动监听器,这样在容器启动后Spring会初始化一个ServletContext,负责加载springmvc的九大组件(调用DispatcherServlet.onRef ...

  6. WebStorm 6.0 与 7.0 注册码

    经测试 WebStorm 7均可以使用如下注册码,简直就是神key啊! WebStorm 6.0 与 7.0 注册码 User Name: EMBRACE License Key: ===== LIC ...

  7. 洛谷——P2657 低头一族

    https://www.luogu.org/problem/show?pid=2657 题目描述 一群青年人排成一队,用手机互相聊天. 每个人的手机有一个信号接收指标,第i个人的接收指标设为v[i]. ...

  8. socketpair和pipe的区别

    http://blog.csdn.net/bingqingsuimeng/article/details/9055499 管道pipe是半双工的,pipe两次才能实现全双工,使得代码复杂.socket ...

  9. muduo总结

    总结说的有的过大,算是对自己学习的一个总结.兴许会不断补充. 模型总结 muduo是基于非堵塞的IO和事件驱动的网络库. muduo的总体结构时one loop per thread+threadpo ...

  10. cpu真实占用率检測工具

     windows任务管理器所示CPU占用,一直在不断的变动跳跃 ,并不能反应真实的平均CPU占用率.迅雷下载工具也是一样 ,有时这些知名软件,反倒是没有做的这么人性化,细致.或 许就是不想让人知道 ...