Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了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学习之路第十篇：简单计算器的实现的更多相关文章
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十六篇：车型列表的添加、删除与检索项目
又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...
- Vue学习之路第十四篇：v-for指令中key的使用注意事项
1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...
- Vue学习之路第十二篇：为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- Vue学习之路第十九篇：按键修饰符的使用
1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...
- Vue学习之路第十八篇：私有过滤器的使用
1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...
- Vue学习之路第十五篇：v-if和v-show指令
1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第七篇：跑马灯项目实现
前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...
随机推荐
- JavaScript正则表达式总结
同学们,今天给大家带来一篇正则表达式的总结,老规矩,先说下我们为什么要用正则?正则要用在什么地方? (个人理解的,大神轻喷) 正则很多时候要用于字符串操作,比如我们要把一个字符串里面的空格删除啊,替换 ...
- HDU 1385 Minimum Transport Cost（ Floyd + 记录路径 ）
链接:传送门 题意:有 n 个城市,从城市 i 到城市 j 需要话费 Aij ,当穿越城市 i 的时候还需要话费额外的 Bi ( 起点终点两个城市不算穿越 ),给出 n × n 大小的城市关系图,-1 ...
- ELK介绍及搭建 Elasticsearch 分布式集群
上:https://blog.51cto.com/zero01/2079879 下:https://blog.51cto.com/zero01/2082794
- 教你十分钟构建好 SpringBoot + SSM 框架
目前最主流的 java web 框架应该是 SSM,而 SSM 框架由于更轻便与灵活目前受到了许多人的青睐.而 SpringBoot 的轻量化,简化项目配置, 没有 XML 配置要求等优点现在也得到了 ...
- nyoj 38 简单并查集的应用&最小生成树
#include<stdio.h> #include<stdlib.h> #define inf 0x3fffffff #define N 600 struct node { ...
- BA-siemens-apogee-ppcl
adapts函数的使用 常规控制风机及阀门的程序是使用PID来调节,但是自适应算法能更好的调节. 西门子的自适应调节函数adapts用法如下: 以下文章为网络转载,原文链接地址http://news. ...
- grpc mvn protobuf:compile 过程
grpc mvn protobuf:compile 过程 编写代码之后,直接使用 mvn protobuf:compile会报错,木有protoc.exe文件: 可以使用Terminal输入mvn命令 ...
- 去哪网实习总结：如何配置数据库连接（JavaWeb）
本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发.. . 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果. .. 实习立即就要结束了.总结一下几点之前没有注意过的变成习惯和问题,分 ...
- Oracle配置网络服务
对于Oracle来说.不管是连接本地数据库还是远程连接server数据库,都须要在本机配置网络服务才可连接. 大家可能不明确为什么. 先拿SqlServer来说.SqlServer在连接数据库的时候仅 ...
- Drupal 自己定义主题实体 Theming Custom Entities
在自己定义主题中输出结果时,有三个部分或很多其它特殊的函数.如 hook_menu,Page Callback.MODULE_theme 钩子 1.hook_menu 为了使用自己定义的实体.像创建. ...