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 相关文章推荐
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 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
php生成excel列序号代码实例
2013/12/24 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
Javascript实现单例模式
2016/01/24 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
浅析vue-router原理
2018/10/19 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
C# .NET面试题
2015/11/28 面试题
通用C#笔试题附答案
2016/11/26 面试题
女方婚礼新郎答谢词
2014/01/11 职场文书
中学生自我鉴定
2014/02/04 职场文书
公益广告语集锦
2014/03/13 职场文书
党支部承诺书范文
2014/03/28 职场文书
临床医师个人自我评价
2014/04/06 职场文书
租房协议书
2014/04/10 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技