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 18 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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+mysql一个名片库程序
2006/10/09 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP可变函数的使用详解
2013/06/14 PHP
PHP 错误处理机制
2015/07/06 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
yii用户注册表单验证实例
2015/12/26 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
js中的面向对象入门
2017/03/06 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
Python深入学习之对象的属性
2014/08/31 Python
Python中input和raw_input的一点区别
2014/10/21 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
公交公司毕业生求职信
2014/02/15 职场文书
晚归检讨书
2014/02/19 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
求职意向书范文
2014/04/01 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
商场促销活动策划方案
2014/08/18 职场文书