我有一个按钮,它可以正确地删除this.fullformula的最后一个索引,它是一个字符串,但对于this.result,它不起作用,它是一个整数,它只会删除一个字符,并且不会在函数上循环。我认为是else语句中的this.formula出了问题,所以我添加了这个,但仍然不起作用
这是一个计算器项目,我们有完整的公式,结果和当前输入当前输入将得到您在运算符之前键入的每个字符完整公式是短语包括数字运算符结果是完整公式的答案实际上我刚开始在代码片段中导入vue如果有人告诉我如何做到这一点尤其当你有组件的时候我的项目就在这个存储库中github.com/rozhansh43/vue-cal
new Vue({
el:'#app',
data {
currentSign: ' ',
currentInput: ' ',
fullFormula: ' ',
result: '',
inputResult: ' '
},
methods: {
updateNumber (digit) {
if (digit === '.') {
if (!this.currentInput || !(this.currentInput * 1)) {
this.fullFormula = '0'
}
if (!(this.currentInput.includes('.'))) {
this.fullFormula += '.'
}
} else {
(!this.currentInput || (!(this.currentInput*1) && !(this.currentInput.includes('.')))) ? (
this.currentInput += digit,
this.fullFormula += digit
):(
this.currentInput += digit,
this.fullFormula += digit
);
}
},
changeSign () {
this.currentSign ? this.currentSign = ' ' : this.currentSign = '-'
},
addOperator (op) {
if(this.result) {
this.fullFormula = `${this.result} ${op} `
this.result = ' '
} else {
if (this.currentInput) {
this.fullFormula += `${this.result} ${op} `
this.currentSign = ' '
this.currentInput = ''
} else {
if (this.fullFormula.includes(' ')) {
var temp = this.fullFormula.split('')
temp[temp.length-2] = op
this.fullFormula = temp.join('')
}
}
}
},
execute () {
if(this.fullFormula) {
this.fullFormula
this.result = eval(this.fullFormula)
} else {
this.fullFormula
this.result = this.currentInput
}
this.currentSign = ' '
this.currentInput = ' '
this.fullFormula = this.result
},
clear () {
this.currentSign = ' '
this.currentInput = ' '
this.fullFormula = ''
this.result = ''
},
lastindex () {
if (this.result == '') {
this.fullFormula = this.fullFormula.slice (0,-1)
} else {
this.fullFormula = this.result.toString().slice(0, -1)
this.result = this.fullFormula.Number(this.fullFormula)
}
}
}
})* {
box-sizing: border-box;
transition: 0.25s ease;
}
.abs-center {
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
transform: translate(-50%, -50%);
}
.block {
display: block;
position: relative;
}
.rela-inline {
display: inline-block;
position: relative;
}
.flex-r {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.flex-c {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.flex {
flex: 1 1 0;
}
body {
transition: 0s;
font-family: monospace;
font-size: 18px;
}
.small {
font-size: 14px;
margin-bottom: 10px;
}
.calculator {
width: 420px;
padding: 10px;
}
.display {
margin: 10px 5px;
background-color: rgb(240, 240, 240);
font-size: 36px;
letter-spacing: 4px;
text-align: right;
padding: 15px 10px;
overflow: hidden;
border: none;
border-radius: 3px;
}
.display *::before {
content: "";
background-color: rgb(240, 240, 240);
}
.button {
margin: 5px;
text-align: center;
padding: 20px 5px;
max-width: 90px;
background-color: rgb(250, 250, 250);
box-shadow: 4px 3px 80px 3px rgb(201, 201, 201);
border-radius: 3px;
flex: 1 1 0;
}
.button:hover,
.button:active {
background-color: rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.button.wide {
flex: 2 1 0;
max-width: 500px;
}
.button.wider {
flex: 3 1 0;
max-width: 500px;
}
.button.grey {
background-color: rgba(53, 55, 59, 0.5);
}
.button.grey:hover,
.button.grey:active {
background-color: #494d5a;
}
.button.hidden {
cursor: default;
opacity: 0;
}
.button.disabled {
cursor: default;
color: rgba(255, 255, 255, 0.2);
}
.button.disabled:hover,
.button.disabled:active {
background-color: rgba(255, 255, 255, 0.1);
}
input {
width: 100%;
height: 94px;
background-color: rgb(250, 250, 250);
box-shadow: 4px 3px 80px 3px rgb(201, 201, 201);
border: none;
padding: 0 30px;
font-size: 20px;
}<div id="app">
<div class="abs-center calculator">
<input type="text" v-model="fullFormula" @keyup.enter="execute"/>
<div class="block button-section">
<div class="flex-r button-row">
<div class="button grey" @click="clear">
AC
</div>
<div class="button grey" @click="lastindex">
C
</div>
<div class="button" @click="changeSign">
+/-
</div>
<div class="button" @click="addOperator('/')">/</div>
</div>
<div class="flex-r button-row">
<div class="button" @click="updateNumber('7')">
7
</div>
<div class="button" @click="updateNumber('8')">
8
</div>
<div class="button" @click="updateNumber('9')">
9
</div>
<div class="button" @click="addOperator('*')">
*
</div>
</div>
<div class="flex-r button-row">
<div class="button" @click="updateNumber('4')">
4
</div>
<div class="button" @click="updateNumber('5')">
5
</div>
<div class="button" @click="updateNumber('6')">
6
</div>
<div class="button" @click="addOperator('-')">
-
</div>
</div>
<div class="flex-r button-row">
<div class="button" @click="updateNumber('1')">
1
</div>
<div class="button" @click="updateNumber('2')">
2
</div>
<div class="button" @click="updateNumber('3')">
3
</div>
<div class="button" @click="addOperator('+')">
+
</div>
</div>
<div class="flex-r button-row">
<div class="button wide" @click="updateNumber('0')">
0
</div>
<div class="button" @click="updateNumber('.')">
.
</div>
<div class="button grey" @click="execute">
=
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
发布于 2021-07-24 06:09:31
它是这样工作的
lastindex () {
if (this.result == '') {
this.fullFormula = this.fullFormula.slice (0,-1)
} else {
this.result = this.result.toString().slice(0, -1)
this.fullFormula = this.result
}
}https://stackoverflow.com/questions/68504956
复制相似问题