用vue做一个简易计算器

最新推荐文章于 2024-04-09 10:43:49 发布

Huiyv_int

最新推荐文章于 2024-04-09 10:43:49 发布

阅读量229

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Huiyv_int/article/details/129927423

版权

该文章展示了一个使用Vue.js库创建的简单计算器应用。用户可以输入两个数字并选择加、减、乘、除四种运算符，结果显示在页面上。Vue实例绑定了数据和DOM元素，通过观察器自动更新计算结果，实现了动态交互功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<title>Vue Calculator</title>

<script src="js/vue.js"></script>
</head>
<body>
<div id="app">

<p>Result: {{ result }}</p>

<label for="num1">Number 1:</label>
<input type="number" id="num1" v-model.number="num1">

<label for="operator">Operator:</label>
<select id="operator" v-model="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>

<label for="num2">Number 2:</label>
<input type="number" id="num2" v-model.number="num2">
</div>

<script>
// 创建 Vue 实例
var app = new Vue({
// 绑定到页面上的 DOM 元素
el: '#app',
// 定义数据（可以在页面上直接使用）
data: {
num1: 0, // 第一个数字（默认为0）
num2: 0, // 第二个数字（默认为0）
operator: '+', // 操作符（默认为加号）
result: 0 // 计算结果（默认为0）
},
// 定义观察器（即监听器），会在被观察的数据发生变化时自动调用
watch: {
// 监听 num1、num2 和 operator 变化，重新计算结果
num1: 'calcResult',
num2: 'calcResult',
operator: 'calcResult'
},
// 定义方法，可以在页面上直接调用
methods: {
calcResult: function() {
// 根据 operator 执行相应的运算
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;
}
}
}
});
</script>
</body>
</html>