Vue实现简易计算器


Posted in Javascript onFebruary 25, 2020

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

<html>
<body>
<div id="demo">
 <h2>简单加减乘除计算器</h2>
 <p>请输入第一个数:<input type="text" v-model="firNum"></p>
 <p>请输入第二个数:<input type="text" v-model="secNum"></p>
 <p>
 <button @click="plus">+</button>
 <button @click="dec">-</button>
 <button @click="multiple">x</button>
 <button @click="devise">/</button>
 </p>
 <p>计算结果:<span v-text="result"></span></p>
</div>
<script>
 var v = new Vue({
 el:"#demo",
 data:{
  firNum:"",
  secNum:"",
  result:""
 },
 methods:{
  plus:function () {
  // this.result = this.firNum + this.second; //这样只是字符拼接
  this.result = parseInt(this.firNum) + parseInt(this.secNum);
  },
  dec:function () {
  this.result = parseInt(this.firNum) - parseInt(this.secNum);
  },
  multiple:function () {
  this.result = parseInt(this.firNum) * parseInt(this.secNum);
  },
  devise:function () {
  this.result = parseInt(this.firNum) / parseInt(this.secNum);
  }
 }
 })
</script>
</body>
</html>

效果:

Vue实现简易计算器

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

Javascript 相关文章推荐
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
React事件处理的机制及原理
Dec 03 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 #Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 #Javascript
es6中let和const的使用方法详解
Feb 24 #Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
JS数组扁平化、去重、排序操作实例详解
Feb 24 #Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 #Javascript
You might like
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP数组及条件,循环语句学习
2012/11/11 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
php实现记事本案例
2020/10/20 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
js实现批量删除功能
2020/08/27 Javascript
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python重要函数eval多种用法解析
2020/01/14 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
会计出纳员的自我评价
2014/01/15 职场文书
库房保管员岗位职责
2014/04/07 职场文书
基于python实现银行管理系统
2021/04/20 Python