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实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
jQuery实现增删改查
Dec 22 jQuery
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到MySQL的方法
2011/04/23 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python生成器推导式用法简单示例
2019/10/08 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
违反课堂纪律检讨书
2014/01/19 职场文书
网络程序员自荐信
2014/01/25 职场文书
单位委托书格式范本
2014/09/29 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
获奖感言怎么写
2015/07/31 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL