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 相关文章推荐
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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中图片等比缩放的实例
2013/03/24 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
php strftime函数的详细用法
2018/06/21 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
2019年Java面试必问之经典试题
2012/09/12 面试题
如何写你的创业计划书
2014/01/07 职场文书
组织关系转移介绍信
2014/01/16 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
项目合作协议书范本
2014/04/16 职场文书
养牛场项目建议书
2014/05/13 职场文书
学习十八大的心得体会
2014/09/12 职场文书
学位证书委托书
2014/09/30 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
个人合伙协议书范本
2014/10/14 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
监考失职检讨书
2015/01/26 职场文书
企业催款函范本
2015/06/24 职场文书
筑梦中国心得体会
2016/01/18 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python