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 DOM 添加事件
Feb 14 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
javascript实现密码验证
Nov 10 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
详解JS中的attribute属性
Apr 25 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
javascript 数组排序函数
2009/08/20 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python中__call__方法示例分析
2014/10/11 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python入门之井字棋小游戏
2020/03/05 Python
python logging通过json文件配置的步骤
2020/04/27 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
工作个人的自我评价
2014/01/14 职场文书
创先争优活动方案
2014/02/12 职场文书
2015年助残日活动总结
2015/03/27 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
php修改word的实例方法
2021/11/17 PHP
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏