Vue学习之路第十篇：简单计算器的实现
Posted shibin90
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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学习之路第十篇：简单计算器的实现的主要内容，如果未能解决你的问题，请参考以下文章