Vue学习笔记：简易计算器的实现

最新推荐文章于 2024-06-01 15:46:07 发布

佳佳军

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量42

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/2201_75873335/article/details/129912021

版权

效果展示

计算器

1.引入js

<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
</head>

2.html部分

<body> 
		<div id="app">
			<!--使用文本框输入数值，并使用v-model双向绑定-->
			<input type="text" placeholder="" v-model="number1" />
			<!--使用select定义列表 让运算符下拉-->
			<select v-model="option">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" placeholder=""  v-model="number2"/>
			<!--value代表属性，用@click进行事件绑定实现点击-->
			<input type="button" value="="  @click="xx"/>
			<!--显示结果-->
			<input type="text" v-model="result" />
		</div>
</body>

3.实例化对象

<script>
		var vm = new Vue({
			el:"#app",
			data:{
				number1:"",
				number2:"",
				result:"0",
				option:"+"//默认值
			},
			methods:{
				xx(){
					//使用switch分支语句
					
					switch (this.option){
						//计算结果
						case"+":
						this.result=parseInt(this.number1)+parseInt(this.number2)
						break;
						case"-":
						this.result=parseInt(this.number1)-parseInt(this.number2)
						break;
						case"*":
						this.result=parseInt(this.number1)*parseInt(this.number2)
						break;
						case"/":
						this.result=parseInt(this.number1)/parseInt(this.number2)
						break;
					}
				}
			}
		});
	</script>