使用vue写一个简单计算机
时间: 2023-05-18 15:03:34 浏览: 108
非常感谢您的提问。以下是使用 Vue 编写一个简单计算器的代码示例:
HTML 代码:
```
<div id="app">
<input type="text" v-model="num1">
<select v-model="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2">
<button @click="calculate">Calculate</button>
<p>Result: {{ result }}</p>
</div>
```
Vue 实例代码:
```
new Vue({
el: '#app',
data: {
num1: '',
num2: '',
operator: '+',
result: ''
},
methods: {
calculate: function() {
var n1 = parseFloat(this.num1);
var n2 = parseFloat(this.num2);
var op = this.operator;
var res = 0;
switch(op) {
case '+':
res = n1 + n2;
break;
case '-':
res = n1 - n2;
break;
case '*':
res = n1 * n2;
break;
case '/':
res = n1 / n2;
break;
}
this.result = res.toFixed(2);
}
}
});
```
这个计算器可以让用户输入两个数字和一个运算符,然后计算结果并显示在页面上。用户可以选择加、减、乘、除四种运算符。这个计算器使用了 Vue 的双向数据绑定和计算属性,可以实时更新结果。