vue.js实现一个计算器

最新推荐文章于 2024-07-16 19:54:42 发布

hello_读书就是赚钱

最新推荐文章于 2024-07-16 19:54:42 发布

阅读量9.2k

点赞数 6

分类专栏：前端技术

本文链接：https://blog.csdn.net/hayre/article/details/60610868

版权

前端技术专栏收录该内容

9 篇文章 1 订阅

订阅专栏

这里写图片描述

git:https://git.oschina.net/jjtHappy/js_caculator.git

为了学习vue.js，把一个基于js实现的计算器转换为vue.js单页应用模式。

此次实操旨在学会运用vue.js，不注重计算器的样式，逻辑

先简单的看一下基于js实现的计算器是怎样的

1、html

//只截取body里面的内容
<body>
<div id="calcuator">
    <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />
    <div id="btn-list">
        <div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
        <div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">+/-</div>
        <div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">%</div>
        <div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">←</div>
        <div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
        <div onclick="typetoinput('8')" class=" btn-30 btn-radius">8</div>
        <div onclick="typetoinput('9')" class=" btn-30 btn-radius">9</div>
        <div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">+</div>
        <div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">-</div>
        <div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
        <div onclick="typetoinput('5')" class=" btn-30 btn-radius">5</div>
        <div onclick="typetoinput('6')" class=" btn-30 btn-radius">6</div>
        <div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">×</div>
        <div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">÷</div>
        <div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
        <div onclick="typetoinput('2')" class=" btn-30 btn-radius">2</div>
        <div onclick="typetoinput('3')" class=" btn-30 btn-radius">3</div>
        <div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">×²</div>
        <div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">√</div>
        <div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
        <div onclick="typetoinput('.')" class=" btn-30 btn-radius">.</div>
        <div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">=</div>
    </div>
</div>
</body>

可以看到这里用的是传统的div+css3进行布局，这让我联想到了vue里面的组件模式，接下里我会对这里开始动手，把对应的模块以组件的模式拆出来

2、js

// JavaScript Document
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
var _string=new Array();
var _type;
//点击数字键调用的方法
function typetoinput(num)
{
    .....
}
//点击操作键调用的方法
function operator(type)
{
    .....
}
//用于计算结果
function result(value)
{
    .....
}
//用于判读是否是一个数字键
function checknum(inputvalue)
{
    .....
}

这里的js都是在html里面通过on-click事件方法进行调用的，这里可以想到vue里面的事件绑定机制，我们可以把方法写在 vue模型里面，再绑定到事件里面去

3、改造

1 首先，原来的计算方式是通过全局的 _string, _type 记录状态，输出框的状态是通过<input> 标签的name与value进行记录的，因此，我们可以通过vue里面的 data绑定来定义这些需要用到的变量，使用一个对象来代替原先对input属性的引用

var calculator = new Vue({
    el:'#calculator',
    data:{
        inputShow:{
            value:'0',
            name:''
        },
        string:[],
        type:''
    },
    ......

2 定义组件，把原来的主框体拆成两个子组件，分别为显示框与键盘，通过组件的父子数值绑定，把父组件中的 inputShow 赋给子组件，再通过计算属性把其中的value 展示出来，具体键盘里面的键是直接写html父标签里面的，因为我觉得此时的css的静态的，所以不抽离出来，使用<slot> 占位呈现。

html

<body>
//主组件
<div id="calculator">
//下面两个分别为子组件
    <!--显示框-->
    <input-box v-bind:input-show="inputShow">

    </input-box>
    <btn-list>
        <div v-on:click="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
        <div v-on:click="operator('opposite')" class=" btn-30 btn-radius color-blue">+/-</div>
        <div v-on:click="operator('percent')" class=" btn-30 btn-radius color-blue">%</div>
        <div v-on:click="operator('backspace')" class=" btn-70 btn-radius color-red font-14">←</div>
        <div v-on:click="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
        <div v-on:click="typetoinput('8')" class=" btn-30 btn-radius">8</div>
        <div v-on:click="typetoinput('9')" class=" btn-30 btn-radius">9</div>
        <div v-on:click="operator('plus')" class=" btn-30 btn-radius color-blue font-14">+</div>
        <div v-on:click="operator('minus')" class=" btn-30 btn-radius color-blue font-14">-</div>
        <div v-on:click="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
        <div v-on:click="typetoinput('5')" class=" btn-30 btn-radius">5</div>
        <div v-on:click="typetoinput('6')" class=" btn-30 btn-radius">6</div>
        <div v-on:click="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">×</div>
        <div v-on:click="operator('divide')" class=" btn-30 btn-radius color-blue font-12">÷</div>
        <div v-on:click="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
        <div v-on:click="typetoinput('2')" class=" btn-30 btn-radius">2</div>
        <div v-on:click="typetoinput('3')" class=" btn-30 btn-radius">3</div>
        <div v-on:click="operator('pow')" class=" btn-30 btn-radius color-blue font-14">×²</div>
        <div v-on:click="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">√</div>
        <div v-on:click="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
        <div v-on:click="typetoinput('.')" class=" btn-30 btn-radius">.</div>
        <div v-on:click="operator('result')" class=" btn-70 btn-radius color-red font-14">=</div>
    </btn-list>
</div>
<script type="text/javascript" src="js/my-app.js"></script>
</body>

vue

  ....
  components:{
        'input-box':{
            props:['inputShow'],
            computed: {
                value:function () {
                    return this.inputShow.value
                }
            },
            template:'<input id="input-box" type="text" size="21" maxlength="21" v-model="value" readonly="readonly">'
        },
        'btn-list':{
            template:'<div id="btn-list"><slot></slot></div>'
        }
    },
    .....

3、根据html里面可以看到我们使用了v-on:click="...." 对div里面的onclick事件方法进行绑定，所以，我们只需要把原项目里面的函数写到vue里面然后再绑定到事件上面就行了

//具体参数详见上面
methods:{
        result:function(value){
            ....
        },
        typetoinput:function(num){
           ....
        },
        checknum:function(inputvalue){
           ....
        }

    }

hello_读书就是赚钱

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
vue.js实现一个计算器

git:https://git.oschina.net/jjtHappy/js_caculator.git为了学习vue.js，把一个基于js实现的计算器转换为vue.js单页应用模式。此次实操旨在学会运用vue.js，不注重计算器的样式，逻辑先简单的看一下基于js实现的计算器是怎样的1、html//只截取body里面的内容<body><div id="calcuator"> <
复制链接

扫一扫

专栏目录