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 相关文章推荐
javascript随机之洗牌算法深入分析
Jun 07 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
微信上传视频文件提示(推荐)
Nov 22 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
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
PHP 开发工具
2006/12/06 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
vue实例的选项总结
2020/06/09 Javascript
Python创建xml的方法
2015/03/10 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
努比亚手机官网:nubia
2016/10/06 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
顶岗实习计划书
2014/01/10 职场文书
党性分析材料格式
2014/12/19 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
python基础入门之字典和集合
2021/06/13 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python