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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
JQuery animate动画应用示例
May 14 jQuery
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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
JS backgroundImage控制
2009/05/19 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python游戏开发的五个案例分享
2020/03/09 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
2014年国培研修感言
2014/03/09 职场文书
创建文明学校实施方案
2014/03/11 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
感恩老师主题班会
2015/08/12 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers