vue可以直接进行运算么_Vue实现计算器功能

直接上代码，目前程序没有校验小数点输入是否正确情况。

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;

}

页面效果：