首页vue3实现简易计算器

vue3实现简易计算器

时间: 2024-04-17 18:22:27 浏览: 238

vue实现计算器功能

5星 · 资源好评率100%

本文实例为大家分享了vue实现计算器功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> [removed][removed] </head> <body> <div id=app> <input type=text v-model=n1> <select v-model=opt> <option value=+>+</option

Vue 3是一种流行的JavaScript框架，用于构建用户界面。下面是一个简单的示例，展示了如何使用Vue 3来实现一个简易计算器：首先，你需要在HTML文件中引入Vue 3的库文件。可以通过CDN链接或者本地文件引入。 ```html <!DOCTYPE html> <html> <head> <title>Vue 3 Calculator</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <input v-model="num1" type="number"> <select v-model="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input v-model="num2" type="number"> <button @click="calculate">Calculate</button> <p>Result: {{ result }}</p> </div> <script> const app = Vue.createApp({ data() { return { num1: 0, num2: 0, operator: '+', result: 0 } }, methods: { calculate() { switch (this.operator) { case '+': this.result = this.num1 + this.num2; break; case '-': this.result = this.num1 - this.num2; break; case '*': this.result = this.num1 * this.num2; break; case '/': this.result = this.num1 / this.num2; break; } } } }); app.mount('#app'); </script> </body> </html> ``` 在上面的示例中，我们使用了Vue 3的`v-model`指令来实现双向数据绑定，将输入框中的值与Vue实例中的数据进行绑定。当点击"Calculate"按钮时，会调用`calculate`方法来执行相应的计算操作，并将结果显示在页面上。

阅读全文