欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

 

每天进步一点点!