前面九篇讲解了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. 小白学习Spark系列六:Spark调参优化

    前几节介绍了下常用的函数和常踩的坑以及如何打包程序,现在来说下如何调参优化.当我们开发完一个项目,测试完成后,就要提交到服务器上运行,但运行不稳定,老是抛出如下异常,这就很纳闷了呀,明明测试上没问题, ...

  2. "SetDestination" can only be called on an active agent that has been placed on a NavMesh. 解决办法

    1.设置了 navmesh之后 要bake 也就是烘焙之后 才有效果 2.在unity 中 window->navigation     4.基本上问题应该得以解决:    

  3. 训练1-W

    有一个长度为n(n<=100)的数列,该数列定义为从2开始的递增有序偶数,现在要求你按照顺序每m个数求出一个平均值,如果最后不足m个,则以实际数量求平均值.编程输出该平均值序列. Input 输 ...

  4. 「Poetize4」创世纪

    在tyvj上怀疑爆栈了.....或许一定是我写挂了.以后调吧... UPD:bzoj上过了... 题解:https://blog.csdn.net/popoqqq/article/details/39 ...

  5. Maven Hibernate

    1.使用maven管理Hibernate实现自动装配jar包 2.需要在配置文件pom.xml中引入 如:引入hibaernate5.2.11.Final版本的jar包,需要做如下配置: <!- ...

  6. botot framework选择下拉框

    1,下拉框不能输入文字,如图: 方法: select from list    id=xxx   要选择的数据 2.下拉框可输入文字,如图: 方法: click element   di=xxx   ...

  7. 基于mybatis的CRUD

    u  基于Mybatis的CRUD u  掌握MyBatis的结果类型-resultMap和resultType u  掌握MyBatis的参数类型 u  掌握#和$两种语法 1      基于myb ...

  8. ASP.NET中的Webconfig 和 Global.asax区别

    Web.Config与Global.asax的区别: Config可以根据不同的错误类型定义不同的错误页,网站重定义转向新的错误页面. Global,在全局错误中写入应用程序事件错误信息,并在当前页输 ...

  9. C#中的文本乱码问题

    文本乱码问题 //提供一种解决C#文本乱码的解决思路 //写入使用: string str; str = this.menu.Text; string fname = Application.Star ...

  10. HDU 3579 线性同余方程组

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...