首页在 html 里面用 vue 做一个加减乘除简易计算器

在 html 里面用 vue 做一个加减乘除简易计算器

时间: 2024-09-18 13:03:59 浏览: 86

在 HTML 中结合 Vue.js 创建一个简单的加减乘除计算器，你可以按照以下步骤操作：首先，在你的项目目录下创建一个名为 `index.html` 的文件，然后引入 Vue 和相关的 CSS 文件，如果需要的话。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Calculator</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>  <link rel="stylesheet" href="styles.css"> </head> <body> <div id="app"> <h1>简单计算器</h1> <input v-model.number="num1" placeholder="数字1"> <select v-model="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input v-model.number="num2" placeholder="数字2"> <button @click="calculate">计算</button> <p>结果: {{ result }}</p> </div> <script> new Vue({ el: '#app', data: { num1: 0, operator: '+', // 初始值设置为加法 num2: 0, result: '' }, methods: { calculate() { let result; switch (this.operator) { case '+': result = this.num1 + this.num2; break; case '-': result = this.num1 - this.num2; break; case '*': result = this.num1 * this.num2; break; case '/': if (this.num2 !== 0) { result = this.num1 / this.num2; } else { alert('除数不能为零'); return; } break; default: result = '无效运算符'; break; } this.result = result; } } }); </script> </body> </html> ``` 在这个例子中，我们创建了一个 Vue 实例，并定义了数据属性（`num1`, `operator`, `num2`, `result`），输入框用于用户输入数值，选择器选择运算符，按钮触发 `calculate` 方法执行计算。注意这里使用了 `v-model.number` 绑定，确保输入的是数字类型。

阅读全文