Vue学习之路第十篇:简单计算器的实现
程序员文章站
2022-04-15 12:41:21
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识。 学前准备: 需要掌握JavaScript的eval()函数,其主要是用来计算某个字符串,并执行其中的 JavaScript 代码。 直接上代码( ......
前面九篇讲解了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()函数,其会把字符串解析出来,按照正常的计算逻辑计算结果。
每天进步一点点!
上一篇: 自定义sqlserver列名
下一篇: sql查询优化方法