vue实现简易计算器功能


Posted in Vue.js onJanuary 20, 2021

本文实例为大家分享了vue实现简易计算器的具体代码,供大家参考,具体内容如下

功能介绍

1、可以实现加减乘除
2、可以实现归零
3、实现退格

效果图一般般,样式随便写的,主要看功能以及实现方法

vue实现简易计算器功能

代码加解释

1、HTML部分

首先布局,把要做的样子写出来,为每一个按键绑定一个点击事件

<div id="box">
  <table>
    <tr>
      <td><input type="button"value="del" @click="del()"></td>
      <td><input type="button"value="C" @click="clean()"></td>
      <td colspan="2"><input type="text" style="width: 200px" value="" v-model="rel"></td>

    </tr>
    <tr>
      <td><input type="button"value="7" @click="add('7')"></td>
      <td><input type="button"value="8" @click="add('8')"></td>
      <td><input type="button"value="9" @click="add('9')"></td>
      <td><input type="button"value="/" @click="add('/')"></td>
    </tr>


    <tr>
      <td><input type="button"value="4" @click="add('4')"></td>
      <td><input type="button"value="5" @click="add('5')"></td>
      <td><input type="button"value="6" @click="add('6')"></td>
      <td><input type="button"value="*" @click="add('*')"></td>
    </tr>

    <tr>
      <td><input type="button"value="1" @click="add('1')"></td>
      <td><input type="button"value="2" @click="add('2')"></td>
      <td><input type="button"value="3" @click="add('3')"></td>
      <td><input type="button"value="-" @click="add('-')"></td>
    </tr>

    <tr>
      <td><input type="button"value="0" @click="add('0')"></td>
      <td><input type="button"value="." @click="add('.')"></td>
      <td><input type="button"value="+" @click="add('+')"></td>
      <td><input type="button"value="=" v-on:click="result()" ></td>
    </tr>


  </table>
</div>

2、css部分,随便写的样式,不是很重要

input{
      width: 100px;
      height: 100px;
      border: 1px solid black;
      line-height: 100px;
      text-align: center;
      border-radius: 10px;
      background-color: gainsboro;
      outline: none;
    }
    table{
      background-color: #b3d7ff;
      margin: auto;
}

3、最后是vm实例的部分

var vm = new Vue({
    el:"#box",
    data:{
      rel:"",

    },
    methods:{
       add(index){//这里就是按键绑定的方法,把获取到的值拼接到rel字符串上
        this.rel +=index;
      },
      result(){
        this.rel = eval(this.rel);//这里是用eval方法进行一个计算
        this.rel = String(this.rel);//这里的目的是为了显示在显示栏的数字还是字符串,只有字符串才能进行退格,归零的操作
      },
      del(){//这个就是退格的操作,用字符串的substring方法截取,每一次截取都是从第0个开始,到长度的前一个,就相当于退格了。
      this.rel = this.rel.substring(0,this.rel.length-1);
      },
      clean(){//这里就是归零的方法,通过给结果赋一个空字符串的方法来实现归零的操作,当然也可以使用删除的方法,例如unshift方法或者pop方法,直接赋值为空比较简便。
         this.rel = "";
      }
    }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue使用过滤器格式化日期
Jan 20 #Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
vue实现验证用户名是否可用
Jan 20 #Vue.js
vue实现按钮切换图片
Jan 20 #Vue.js
Vue实现图书管理案例
Jan 20 #Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 #Vue.js
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
You might like
PHP sleep()函数, usleep()函数
2016/08/25 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
js实现简单的秒表
2020/01/16 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Python常用模块用法分析
2014/09/08 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
工作个人的自我评价
2014/01/14 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
酒店节能降耗方案
2014/05/08 职场文书
给校长的建议书500字
2014/05/15 职场文书
单位租房协议范本
2014/12/03 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
2015年中秋节主持词
2015/07/30 职场文书
导游带团欢迎词
2015/09/30 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python