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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
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数据缓存技术
2007/02/14 PHP
php基础学习之变量的使用
2011/06/09 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
由Javascript实现的页面日历
2011/11/04 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
在Vue中使用echarts的方法
2018/02/05 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
年终总结会议主持词
2014/03/17 职场文书
工程售后服务承诺书
2014/05/21 职场文书
企业环保标语
2014/06/10 职场文书
汽修专业自荐信
2014/07/07 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
python程序的组织结构详解
2021/12/06 Python