Vue计算器案例

最新推荐文章于 2025-06-24 22:42:30 发布

原创最新推荐文章于 2025-06-24 22:42:30 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 3 个专栏收录

11 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

Bootstrap

5 篇文章

订阅专栏

本文将介绍如何使用Vue.js框架构建一个简单的计算器应用，通过实例详细讲解Vue组件化开发过程，涉及计算逻辑处理和用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue计算器案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向绑定计算器</title>
		<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			input{
				width:100px;
				height: 20px;
				border: 1px solid black;
			}
		</style>
	
	</head>
	<body>
		<div id="div">
			<h4>计算器</h4>
			<input type="text" v-model="n1" @input="dataChanged">
			<select v-model="opt" @change="dataChanged">
				<option value ="+" selected="">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
				<option value ="%">%</option>
			</select>
			<input type="text" v-model="n2" @input="dataChanged">
			<span style="font-weight: bolder;"> = </span>
			<input type="text" v-model="result">
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#div',
				data:{
					n1:null,
					n2:null,
					result:null,
					opt:'+'
				},
				methods:{
					dataChanged(){
						switch(this.opt){
							case '+':
								this.result = parseFloat(this.n1) + parseFloat(this.n2);
								break;
							case '-':
								this.result = parseFloat(this.n1) - parseFloat(this.n2);
								break;
							case '*':
								this.result = parseFloat(this.n1) * parseFloat(this.n2);
								break;
							case '/':
								this.result = parseFloat(this.n1) / parseFloat(this.n2);
								break;
							case '%':
								this.result = parseFloat(this.n1) % parseFloat(this.n2);
								break;
						}
						
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述