基于vue.js的计算器_编辑器、计算器_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

这是一款非常好看的基于vue.js的计算器，支持普通计算器和科学计算器，点击计算器上面的Show Advanced Mode和Show Basic Mode即可进行切换。经过改造可以放在自己的网站上。
因为比较简单，所以就不提供下载地址了，您可以按照下面的方法一步一步实现。

使用方法

1、加入css

01<style>
02body {
03  background: linear-gradient(to right, #85D8CE, #085078);
04}
05#app {
06  font-family: 'Avenir', Helvetica, Arial, sans-serif;
07  -webkit-font-smoothing: antialiased;
08  -moz-osx-font-smoothing: grayscale;
09  text-align: center;
10  color: #2c3e50;
11  display: flex;
12  flex-wrap: wrap;
13  justify-content: center;
14  align-item: center;
15}
16.calculator {
17  width: 440px;
18  padding: 20px;
19  border-radius: 5px;
20  margin: 20px auto;
21  font-size: 16px;
22  background-color: #333333;
23}
24.input {
25  width: 420px;
26  height: 50px;
27  border-radius: 0px;
28  border: 1px solid black;
29  background-color: #333333;
30  color: #d9d9d9;
31  padding: 0 5px 0 5px;
32  margin: 0 0px 10px 0px;
33  font-size: 30px;
34}
35.input:focus,
36.input:active {
37  border-color: #03a9f4;
38  box-shadow: 0 0 4px #03A9F4;
39  outline: none 0;
40}
41.button {
42  margin: 3px;
43  width: 63px;
44  border: 1px solid #0d0d0d;
45  height: 30px;
46  border-radius: 4px;
47  color: #d9d9d9;
48  background-color: #1a1a1a;
49  cursor: pointer;
50  outline: none;
51}
52.mode {
53  display: flex;
54  flex-wrap: wrap;
55  justify-content: space-evenly;
56}
57.equal-sign {
58  background-color: green;
59  width: 133px;
60}
61.toggle-button {
62  border: none;
63  background-color: #333333;
64  cursor: pointer;
65  outline: none;
66  font-size: 1rem;
67  color: #fff;
68  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35);
69}
70p {
71  margin-top: 0;
72}
73button::-moz-focus-inner {
74  border-color: transparent;
75}
76</style>

注意：不要和自己的css重复了

2、引入vue.js

`1`	`<script` `src="http://www.5imoban.net/download/vue/vue-2.5.16.min.js"></script>`

3、在需要使用该计算器的地方加入html

01<div id="app">
02  <div class="calculator">
03    <button @click="changeModeEvent" class="toggle-button">
04      <p v-if="changeMode">Show Advanced Mode     ⚈</p>
05      <p v-else>Show Basic Mode     ⚆</p>
06    </button>
07    <div class="results">
08      <input class="input" v-model="current" />
09    </div>
10    <div class="mode" v-if="changeMode">
11      <button class="button" @click="press">7</button>
12      <button class="button" @click="press">8</button>
13      <button class="button" @click="press">9</button>
14      <button class="button" @click="press">*</button>
15      <button class="button" @click="press"><=</button>
16      <button class="button" @click="press">C</button>
17      <button class="button" @click="press">4</button>
18      <button class="button" @click="press($event)">5</button>
19      <button class="button" @click="press">6</button>
20      <button class="button" @click="press">/</button>
21      <button class="button" @click="press">(</button>
22      <button class="button" @click="press">)</button>
23      <button class="button" @click="press">1</button>
24      <button class="button" @click="press">2</button>
25      <button class="button" @click="press">3</button>
26      <button class="button" @click="press">-</button>
27      <button class="button" @click="press">x 2</button>
28      <button class="button" @click="press">±</button>
29      <button class="button" @click="press">0</button>
30      <button class="button" @click="press">.</button>
31      <button class="button" @click="press">%</button>
32      <button class="button" @click="press">+</button>
33      <button class="button equal-sign" @click="press">=</button>
34    </div>
35    <div class="mode" v-else>
36      <button class="button" @click="press">sin</button>
37      <button class="button" @click="press">cos</button>
38      <button class="button" @click="press">tan</button>
39      <button class="button" @click="press">x^</button>
40      <button class="button" @click="press"><=</button>
41      <button class="button" @click="press">C</button>
42      <button class="button" @click="press">log</button>
43      <button class="button" @click="press">ln</button>
44      <button class="button" @click="press">e</button>
45      <button class="button" @click="press">°</button>
46      <button class="button" @click="press">rad</button>
47      <button class="button" @click="press">√</button>
48      <button class="button" @click="press">7</button>
49      <button class="button" @click="press">8   </button>
50      <button class="button" @click="press">9</button>
51      <button class="button" @click="press">/</button>
52      <button class="button" @click="press">x 2</button>
53      <button class="button" @click="press">x !</button>
54      <button class="button" @click="press">4</button>
55      <button class="button" @click="press">5</button>
56      <button class="button" @click="press">6</button>
57      <button class="button" @click="press">*</button>
58      <button class="button" @click="press">(</button>
59      <button class="button" @click="press">)</button>
60      <button class="button" @click="press">1</button>
61      <button class="button" @click="press">2</button>
62      <button class="button" @click="press">3</button>
63      <button class="button" @click="press">-</button>
64      <button class="button" @click="press">%</button>
65      <button class="button" @click="press">±</button>
66      <button class="button" @click="press">0</button>
67      <button class="button" @click="press">.</button>
68      <button class="button" @click="press">π</button>
69      <button class="button" @click="press">+</button>                   
70      <button class="button equal-sign" @click="press">=</button>
71    </div>
72  </div>
73</div>

4、初始化js

001let app = new Vue({
002  el: '#app',
003  data () {
004    return{
005      current: '',
006      changeMode: true
007    }
008  },
009  methods: {
010    press: function (event) {
011      let me = this
012      let key = event.target.textContent
013      if (
014        key != '=' &&
015        key != 'C' &&
016        key != '*' &&
017        key != '/' &&
018        key != '√' &&
019        key != "x 2" &&
020        key != "%" &&
021        key != "<=" &&
022        key != "±" &&
023        key != "sin" &&
024        key != "cos" &&
025        key != "tan" &&
026        key != "log" &&
027        key != "ln" &&
028        key != "x^" &&
029        key != "x !" &&
030        key != "π" &&
031        key != "e" &&
032        key != "rad" &&
033        key != "°"
034      ) {
035        me.current += key
036      } else if (key === '=') {
037        if ((me.current).indexOf('^') > -1) {
038          let base = (me.current).slice(0, (me.current).indexOf('^'))
039          let exponent = (me.current).slice((me.current).indexOf('^') + 1)
040          me.current = eval('Math.pow(' + base + ',' + exponent + ')')
041        } else {
042          me.current = eval(me.current)
043        }
044      } else if (key === 'C') {
045        me.current = ''
046      } else if (key === '*') {
047        me.current += '*'
048      } else if (key === '/') {
049        me.current += '/'
050      } else if (key === '+') {
051        me.current += '+'
052      } else if (key === '-') {
053        me.current += '-'
054      } else if (key === '±') {
055        if ((me.current).charAt(0) === '-') {
056          me.current = (me.current).slice(1)
057        } else {
058          me.current = '-' + me.current
059        }
060      } else if (key === '<=') {
061        me.current = me.current.substring(0, me.current.length - 1)
062      } else if (key === '%') {
063        me.current = me.current / 100
064      } else if (key === 'π') {
065        me.current = me.current * Math.PI
066      } else if (key === 'x 2') {
067        me.current = eval(me.current * me.current)
068      } else if (key === '√') {
069        me.current = Math.sqrt(me.current)
070      } else if (key === 'sin') {
071        me.current = Math.sin(me.current)
072      } else if (key === 'cos') {
073        me.current = Math.cos(me.current)
074      } else if (key === 'tan') {
075        me.current = Math.tan(me.current)
076      } else if (key === 'log') {
077        me.current = Math.log10(me.current)
078      } else if (key === 'ln') {
079        me.current = Math.log(me.current)
080      } else if (key === 'x^') {
081        me.current += '^'
082      } else if (key === 'x !') {
083        let number = 1
084        if (me.current === 0) {
085          me.current = '1'
086        } else if (me.current < 0) {
087          me.current = NaN
088        } else {
089          let number = 1
090          for (let i = me.current; i > 0; i--) {
091            number *= i
092          }
093          me.current = number
094        }
095      } else if (key === 'e') {
096        me.current = Math.exp(me.current)
097      } else if (key === 'rad') {
098        me.current = me.current * (Math.PI / 180)
099      } else if (key === '°') {
100        me.current = me.current * (180 / Math.PI)
101      }
102    },
103    changeModeEvent: function() {
104      let me = this
105      me.changeMode = !me.changeMode
106    }
107  }
108})