Vue教你如何实现简单计算器

最新推荐文章于 2024-02-29 09:16:48 发布

我是秃头兔

最新推荐文章于 2024-02-29 09:16:48 发布

阅读量127

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/y1304908038/article/details/121001476

版权

这篇博客展示了如何利用Vue.js创建一个基本的在线计算器。HTML结构包含输入框、选择运算符的下拉菜单、第二个输入框和计算按钮，以及显示结果的span元素。JavaScript部分定义了Vue实例，绑定了数据属性并实现了计算方法。CSS样式可根据个人喜好定制，使得计算器具有良好的用户体验。

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

总体样式

div样式

<div id="app">
			<input type="number" v-model="num1" />
			<select name="" v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="number" v-model="num2"  />
			<button type="button" @click="calc()">=</button>
			<span>{{result}}</span>
		</div>

js样式

	new Vue({
				el: "#app",
				data: {
					num1: 1,
					num2: 1,
					result: 0,
					opt: "+",
				},
				methods: {
					calc() {
						switch (this.opt) {
							case "+":
								this.result = parseInt(this.num1) + parseInt(this.num2)
								break;
							case "-":
								this.result = parseInt(this.num1) - parseInt(this.num2)
								break;
							case "*":
								this.result = parseInt(this.num1) * parseInt(this.num2)
								break;
							case "/":
								this.result = parseInt(this.num1) / parseInt(this.num2)
								break;

						}
					}
				}
			})

css样式根据自己喜欢加。