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 相关文章推荐
jquery中选择块并改变属性值的方法
Jul 31 Javascript
angular.element方法汇总
Jan 07 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
Javascript作用域和作用域链原理解析
Mar 03 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
js实现查询商品案例
Jul 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
Yii核心验证器api详解
2016/11/23 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
pytorch简介
2020/11/11 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
广告学毕业生求职信
2014/01/30 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
商铺租赁意向书
2014/04/01 职场文书
银行贷款收入证明
2014/10/17 职场文书
公司放假通知怎么写
2015/04/15 职场文书
大学生支教感言
2015/08/01 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript