用vue.js实现的网页计算器源码

最新推荐文章于 2024-06-19 18:19:02 发布

mazai5080

最新推荐文章于 2024-06-19 18:19:02 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 经验分享

本文链接：https://blog.csdn.net/mazai5080/article/details/124111835

版权

大家好，今天给大家介绍一款，用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 &nbsp; &nbsp; &#9864;</p>
      <p v-else="">Show Basic Mode &nbsp; &nbsp; &#9862;</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">&#60;=</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">&#60;=</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">&#x003C0;</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，即可获取。

「链接」

mazai5080

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用vue.js实现的网页计算器源码

大家好，今天给大家介绍一款，用vue.js实现的网页计算器源码（图1）。送给大家哦，获取方式在本文末尾。图1可以切换为科学计算器（图2）图2部分代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基于Vue.js的超实用科学型计算器DEMO演示</title> <link rel="stylesheet"
复制链接

扫一扫