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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
axios post提交formdata的实例
Mar 16 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
微信小程序转化为uni-app项目的方法示例
May 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
程序员编程十条戒律
2009/07/09 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
斜45度寻路实现函数
2009/08/20 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
vue项目实现多语言切换的思路
2020/09/17 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
python中的tcp示例详解
2018/12/09 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
怎样填写就业意向
2014/04/02 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
爱的承诺书
2015/01/20 职场文书
离婚被告代理词
2015/05/23 职场文书
学困生转化工作总结
2015/08/13 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL