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()函数，其会把字符串解析出来，按照正常的计算逻辑计算结果。

每天进步一点点！