用vue.js实现的网页计算器源码
2024-04-13 11:33:30
大家好，今天给大家介绍一款，用vue.js实现的网页计算器源码（图1）。送给大家哦，获取方式在本文末尾。
图1
可以切换为科学计算器（图2）
图2
部分代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>基于Vue.js的超实用科学型计算器DEMO演示</title><link rel="stylesheet" href="static/css/normalize.min.css">
<link rel="stylesheet" href="static/css/style.css"></head><body><div id="app"><div class="calculator"><button @click="changeModeEvent" class="toggle-button"><p v-if="changeMode">Show Advanced Mode ⚈</p><p v-else="">Show Basic Mode ⚆</p></button><div class="results"><input class="input" v-model="current"></div><div class="mode" v-if="changeMode"><button class="button" @click="press">7</button><button class="button" @click="press">8</button><button class="button" @click="press">9</button><button class="button" @click="press">*</button><button class="button" @click="press"><=</button><button class="button" @click="press">C</button><button class="button" @click="press">4</button><button class="button" @click="press($event)">5</button><button class="button" @click="press">6</button><button class="button" @click="press">/</button><button class="button" @click="press">(</button><button class="button" @click="press">)</button><button class="button" @click="press">1</button><button class="button" @click="press">2</button><button class="button" @click="press">3</button><button class="button" @click="press">-</button><button class="button" @click="press">x ²</button><button class="button" @click="press">±</button><button class="button" @click="press">0</button><button class="button" @click="press">.</button><button class="button" @click="press">%</button><button class="button" @click="press">+</button><button class="button equal-sign" @click="press">=</button> </div><div class="mode" v-else=""><button class="button" @click="press">sin</button><button class="button" @click="press">cos</button><button class="button" @click="press">tan</button><button class="button" @click="press">x^</button><button class="button" @click="press"><=</button><button class="button" @click="press">C</button><button class="button" @click="press">log</button><button class="button" @click="press">ln</button><button class="button" @click="press">e</button><button class="button" @click="press">∘</button><button class="button" @click="press">rad</button><button class="button" @click="press">√</button><button class="button" @click="press">7</button><button class="button" @click="press">8 </button><button class="button" @click="press">9</button><button class="button" @click="press">/</button><button class="button" @click="press">x ²</button><button class="button" @click="press">x !</button><button class="button" @click="press">4</button><button class="button" @click="press">5</button><button class="button" @click="press">6</button><button class="button" @click="press">*</button><button class="button" @click="press">(</button><button class="button" @click="press">)</button><button class="button" @click="press">1</button><button class="button" @click="press">2</button><button class="button" @click="press">3</button><button class="button" @click="press">-</button><button class="button" @click="press">%</button><button class="button" @click="press">±</button><button class="button" @click="press">0</button><button class="button" @click="press">.</button><button class="button" @click="press">π</button><button class="button" @click="press">+</button> <button class="button equal-sign" @click="press">=</button></div></div>
</div><div style="text-align:center;clear:both"></div><script src='static/js/vue.min.js'></script><script src="static/js/index.js"></script></body>
</html>
本模板编码：10120，需要的朋友，点击下面的链接后，搜索10120，即可获取。
「链接」
用vue.js实现的网页计算器源码相关推荐
- JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue.js开发红酒网站计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目架构:B ...
- 计算机毕设网页设计源码——HTML+CSS+JS+Bootstrap在线音乐试听播放网站模板
HTML5期末大作业:HTML+CSS+JS+Bootstrap在线音乐试听播放网站模板(24页) 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材 ...
- html科学计算器,vue.js实现的经典计算器/科学计算器功能示例
本文实例讲述了vue.js实现的经典计算器/科学计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分: Show Advanced Mode ⚈ Show Basic Mode ⚆ 7 8 ...
- 6个网页背景特效源码 canvas+three.js科技贴图 webgl源码
隧道穿梭特效 粒子矩阵特效 几何随机变换特效 下载地址: 6个网页背景特效源码 canvas+three.js科技贴图 webgl源码-素材美
- 前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)
目录 下载 文档 开始 构造方法 可配置项 方法 语法 事件 两种方式添加事件 自动翻页loading加载功能 案例 CSS basic.css源码如下 JS里面代码太多了,直接官网下载 index. ...
- HTML+CSS+JS网页设计期末课程大作业——多用途的图文展示博客HTML模板(16页) 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码...
HTML5期末大作业:个人博客网站设计--多用途的图文展示博客HTML模板(16页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计 ...
- 开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码 前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功 能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...
- 期末作业成品代码——绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:餐饮美食网站设计--绿色的餐饮美食网站(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设 ...
- 提供4款WEB网页游戏源码下载,亲测绝对可以用
提供4款WEB网页游戏源码下载,亲测绝对可以用! 软件名称:成就网络发布的web三国一键安装可开区版 软件类型:国产源码 运行环境:Win9X/Win2000/WinXP/Win2003/ 软件语言: ...
最新文章
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单
- slowquery 慢查询
- 监控linux空间变化,Linux监控文件变化及主动上报实现
- Kotlin 基础语法
- notepad++正则表达式去掉关键字所在行
- 函数调用过程简单分析
- 具有完整静态文件（JS、CSS）支持的 ASP.NET Core 3.x 动态可加载插件
- 和java转换_java基础之 类型转换
- 再续2014年网页设计趋势
- Java学生管理系统设计与实现 （超详细，含课程设计）
- 函数式编程Haskell初探
- python圣诞节_圣诞节，用Python给自己加顶“圣诞帽”
- 大湿教我写程序(2)之走向AV之路
- 全息眼镜HoloLens可快速捕捉真人3D图像
- 从语音通话和视频通话两个方面搭建专属于自己的私有化部署的视频会议通话系统
- python面向对象高级
- 幂函数与指数函数的近似
- 交通灯控制器的verilog实现
- Oracle SGA PGA UGA
- LawBreaker: An Approach for Specifying Traffic Laws and Fuzzing Autonomous Vehicles (ASE2022)