使用Vue编写简单计算器
时间: 2023-06-28 10:13:08 浏览: 114
好的,下面是一个使用 Vue 编写的简单计算器的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue Calculator</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="result" disabled><br>
<button v-for="btn in buttons" :key="btn" v-on:click="handleClick(btn)">{{btn}}</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
result: '',
buttons: ['1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '*', '0', '.', '=', '/']
},
methods: {
handleClick: function(btn) {
if (btn === '=') {
this.result = eval(this.result);
} else {
this.result += btn;
}
}
}
})
</script>
</body>
</html>
```
在上面的代码中,我们首先定义了一个 Vue 实例 `app`,然后在 `data` 中定义了计算器的结果和按键数组。我们使用 `v-model` 将结果绑定到输入框中,并且使用 `v-for` 循环遍历按键数组渲染出按钮。在 `methods` 中定义了 `handleClick` 方法,用于处理点击事件。如果点击的是 `=`,则使用 `eval` 函数计算出结果并更新到输入框中;否则将按键的值添加到结果中。
阅读全文