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 20 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
解读Vue组件注册方式
May 15 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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(4) php 函数 补充2
2010/02/15 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php实现读取超大文件的方法
2014/07/28 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue组件发布到npm简单步骤
2017/11/30 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
初步理解Python进程的信号通讯
2015/04/09 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python pandas生成时间列表
2019/06/29 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
解析python实现Lasso回归
2019/09/11 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
大学生物业管理求职信
2013/10/24 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
厂区绿化方案
2014/05/08 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
建议书的格式及范文
2015/09/14 职场文书
施工安全协议书
2016/03/22 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript