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 for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
微信小程序 标签传入数据
May 08 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
javascript 特殊字符串
2009/02/25 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
vue.js的提示组件
2017/03/02 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
Python小白垃圾回收机制入门
2020/06/09 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
爱心倡议书范文
2014/05/12 职场文书
鸡毛信观后感
2015/06/11 职场文书
九年级历史教学反思
2016/02/19 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python