vue计算器,
```html
<template>
<div class="a">
<div class="results"><input class="input" v-model="calculation" readonly="readonly"/></div>
<button class="button" @click="touch">1</button>
<button class="button" @click="touch">2</button>
<button class="button" @click="touch">3</button>
<button class="button" @click="touch">4</button>
<button class="button" @click="touch">5</button>
<button class="button" @click="touch">6</button>
<button class="button" @click="touch">7</button>
<button class="button" @click="touch">8</button>
<button class="button" @click="touch">9</button>
<button class="button" @click="touch">0</button>
<button class="button" @click="touch">-</button>
<button class="button" @click="touch">*</button>
<button class="button" @click="touch">+</button>
<button class="button" @click="touch">=</button>
<button class="button" @click="touch">.</button>
<button class="button" @click="touch">/</button>
<button class="button" @click="touch">c</button>
<button class="button" @click="touch">del</button>
</div>
</template>
<script>
export default {
name: 'Calculator',
data() {
return {
calculation: '',
changeMode: true
};
},
methods: {
touch: function(event) {
var key = event.target.textContent;
if (key != '=' && key != '*' && key != '/' && key != 'c' && key != 'del' && key != '+' && key != '-') {
this.calculation += key;
} else if (key === '=') {
try {
this.calculation = eval(this.calculation);
if (typeof this.calculation == 'number' && this.calculation != 'Infinity') {
this.calculation = parseFloat(this.calculation.toFixed(10));
} else {
alert('输入错误'), (this.calculation = '');
}
console.log(this.calculation);
} catch (err) {
alert('输入异常');
this.calculation = '';
}
} else if (key === '*') {
this.calculation += '*';
} else if (key === '/') {
this.calculation += '/';
} else if (key === '+') {
this.calculation += '+';
} else if (key === '-') {
this.calculation += '-';
} else if (key === 'c') {
this.calculation = '';
} else if (key === 'del') {
this.calculation = this.calculation.substring(0, this.calculation.length - 1);
}
},
changeModeEvent: function() {
this.changeMode = !this.changeMode;
}
}
};
</script>
<style scoped>
.a{width: 520px;overflow: hidden;background: #2C3E50;padding: 10px;}
input{width: 500px;height: 80px;font-size: 30px;margin-bottom: 10px;}
button{width: 72.5px;height: 72.5px;margin:3px;font-size: 20px;}
</style>
除0显示错误,浮点运算解决