vue.js实现简单的计算器功能


Posted in Javascript onFebruary 22, 2020

使用vue.js来编写一个简单的计算器,供大家参考,具体内容如下

效果如图所示:是一个十分简单的计算器,包含了加减乘除,不是用原生js写的,而是用vue.js写的

vue.js实现简单的计算器功能

html:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <div id="app">
 
 <input type="text" v-model="n1" />
 <select v-model="opt">
 <option value="+">+</option>
 <option value="-">-</option>
 <option value="*">*</option>
 <option value="/">/</option>
 </select>
 
 <input type="text" v-model="n2" />
 <input type="button" value="=" @click="calc" />
 <input type="text" v-model="result" />
 </div>

 </body>
</html>

js代码:

<script src="js/vue.js"></script>
 <script>
 var vm=new Vue({
 el:"#app",
 data:{
  n1:0,
  n2:0,
  result:0,
  opt:"+"
 },
 methods:{
  //定义计算器算数的方法
  calc(){
  switch(this.opt){
  case "+":
  this.result=parseInt(this.n1)+parseInt(this.n2)
  //return this.result
  break;
  case "-":
  this.result=parseInt(this.n1)-parseInt(this.n2)
  //return this.result
  break;
  case "*":
  this.result=parseInt(this.n1)*parseInt(this.n2)
  //return this.result
  break;
  case "/":
  this.result=parseInt(this.n1)/parseInt(this.n2)
  //return this.result
  break;
  }
  
  }
 }
 })
</script>

不过在最后我使用了一个swith循环来设置这个,还有另一种方法,代码量更少:
可以把里面的循环改成:

//这是投机取巧,不要经常用 正是开发中,尽量少用
var codeStr='parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
this.result=eval(codeStr)

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

Javascript 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
Vue.js实现立体计算器
Feb 22 #Javascript
vue实现计算器功能
Feb 22 #Javascript
js实现网页版贪吃蛇游戏
Feb 22 #Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 #Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 #Javascript
JavaScript中this函数使用实例解析
Feb 21 #Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
You might like
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
javascript读写json示例
2014/04/11 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
入党思想汇报
2014/01/05 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Java实现二分搜索树的示例代码
2022/03/17 Java/Android