使用vue做一个计算器
时间: 2023-09-25 10:13:31 浏览: 97
好的,下面是使用 Vue.js 实现一个简单的计算器的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue Calculator</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#calculator {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
}
input[type="button"] {
width: 100%;
height: 30px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" v-model="result">
<input type="button" value="1" @click="appendNumber(1)">
<input type="button" value="2" @click="appendNumber(2)">
<input type="button" value="3" @click="appendNumber(3)">
<input type="button" value="+" @click="appendOperator('+')">
<input type="button" value="4" @click="appendNumber(4)">
<input type="button" value="5" @click="appendNumber(5)">
<input type="button" value="6" @click="appendNumber(6)">
<input type="button" value="-" @click="appendOperator('-')">
<input type="button" value="7" @click="appendNumber(7)">
<input type="button" value="8" @click="appendNumber(8)">
<input type="button" value="9" @click="appendNumber(9)">
<input type="button" value="*" @click="appendOperator('*')">
<input type="button" value="0" @click="appendNumber(0)">
<input type="button" value="C" @click="clearResult()">
<input type="button" value="=" @click="calculateResult()">
<input type="button" value="/" @click="appendOperator('/')">
</div>
<script>
new Vue({
el: '#calculator',
data: {
result: ''
},
methods: {
appendNumber: function(number) {
this.result += number;
},
appendOperator: function(operator) {
this.result += operator;
},
clearResult: function() {
this.result = '';
},
calculateResult: function() {
try {
this.result = eval(this.result);
} catch (e) {
this.result = 'Error';
}
}
}
});
</script>
</body>
</html>
```
这个计算器有四个按钮用于输入运算符(加、减、乘、除),一个按钮用于清除输入,一个按钮用于计算结果。当用户按下数字按钮时,数字会被追加到输入框中;当用户按下运算符按钮时,运算符会被添加到输入框中;当用户按下清除按钮时,输入框中的内容会被清空;当用户按下计算按钮时,程序会尝试计算输入框中的算式并将结果显示在输入框中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)