用vue.js写一个使用计算属性完成一个计算机,执行加法
时间: 2023-05-19 12:00:37 浏览: 71
Vue.js教程之计算属性
非常感谢您的提问。以下是使用 Vue.js 编写计算器的示例代码:
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">=</button>
<input type="text" v-model="result" readonly>
</div>
```
Vue.js 代码:
```
new Vue({
el: '#app',
data: {
num1: '',
num2: '',
operator: '+',
result: ''
},
computed: {
calculation: function() {
var n1 = parseFloat(this.num1);
var n2 = parseFloat(this.num2);
switch (this.operator) {
case '+':
return n1 + n2;
case '-':
return n1 - n2;
case '*':
return n1 * n2;
case '/':
return n1 / n2;
}
}
},
methods: {
calculate: function() {
this.result = this.calculation;
}
}
});
```
请注意,这只是一个简单的示例,仅用于演示如何使用计算属性实现计算器。实际上,您可能需要添加更多的功能和错误处理来使其更完善。
阅读全文