直接上代碼，目前程序沒有校驗小數點輸入是否正確情況。

v-model="result"

clearable>

7

8

9

/

4

5

6

*

1

2

3

+

0

.

=

-

export?default?{

name:?'Calculator',

data?()?{

return?{

'result':?''

}

},

methods:?{

sendMessage?(message)?{

this.$message({

message:?message,

type:?'warning'

})

},

getResult?(e)?{

//?不可以連續輸入?小數點

if?(e?===?'.'?&&?this.result.split('').reverse().join('').indexOf('.')?===?0)?{

this.sendMessage('請輸入正確的浮點數1')

return?false

}

//?如果第一次?輸入的是?運算符號，則提示

if?(['+',?'-',?'*',?'/',?'%',?'.'].indexOf(e)?>?-1?&&?this.result.length?===?0)?{

this.sendMessage('請先輸入數字')

return?false

}

//?如果第一次?輸入的是?=?號，則直接返回

if?(e?===?'='?&&?this.result.length?===?0)?{

return?false

}

//?出現?=?號則表示已經執行過計算，需要清空

if?(this.result.indexOf('=')?>?-1)?{

this.result?=?''

}

switch?(e)?{

case?'=':

//?eslint-disable-next-line?no-eval

this.result?+=?'='?+?eval(this.result)

break

default:

this.result?+=?e

}

}

}

}

#result{

margin-bottom:?10px;

}

.grid-content{

text-align:?center;

height:?40px;

border:solid?1px?#e6e6e6;

line-height:?40px;

margin-bottom:?10px;

font-weight:?bold;

border-radius:?5px;

cursor:?pointer;

}

.grid-content:hover{

background-color:?#f5f5f5;

}

頁面效果：

總結

以上是生活随笔為你收集整理的vue可以直接进行运算么_Vue实现计算器功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。