vue实现计算器功能


Posted in Javascript onFebruary 22, 2020

本文实例为大家分享了vue实现计算器功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</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>
<script>
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);
     break;
    case "-":
     this.result = parseInt(this.n1) - parseInt(this.n2);
     break;
    case "*":
     this.result = parseInt(this.n1) * parseInt(this.n2);
     break;
    case "/":
     this.result = parseInt(this.n1) / parseInt(this.n2);
     break;
   }
  }
 }
})
</script>
</body>
</html>

效果图:

vue实现计算器功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
web性能优化之javascript性能调优
Dec 28 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
js实现网页版贪吃蛇游戏
Feb 22 #Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 #Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 #Javascript
JavaScript中this函数使用实例解析
Feb 21 #Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
jquery中radio checked问题
2015/03/16 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
深入探讨前端框架react
2015/12/09 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python常见的格式化输出小结
2016/12/15 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
基于Python实现粒子滤波效果
2020/12/01 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS