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学习笔记之jQuery的动画
Dec 22 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
js实现自定义进度条效果
Mar 15 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
mac上配置Android环境变量的方法
Jul 08 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python flask 多对多表查询功能
2017/06/25 Python
利用python画出折线图
2018/07/26 Python
python爬取微信公众号文章
2018/08/31 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python 下载及安装详细步骤
2019/11/04 Python
Python函数基本使用原理详解
2020/03/19 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
函授本科自我鉴定
2014/02/04 职场文书
优秀食品类广告词
2014/03/19 职场文书
资产运营委托书范本
2014/10/16 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
python小程序之飘落的银杏
2021/04/17 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python