vue 简易计算器

最新推荐文章于 2024-03-24 18:25:28 发布

想喝橙汁儿

最新推荐文章于 2024-03-24 18:25:28 发布

阅读量672

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46328144/article/details/108274416

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

vue 刚入门实现简易计算器

如果是刚学习vue，不懂得地方可以问我哦，互相交流能更好的帮助学习。
话不多说，亮代码最重要。。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text"  v-model="num1">
			<select name="select" v-model="opt" id="select">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text"  v-model="num2">
			<button @click="count()">=</button>
			<input type="text" placeholder="结果" v-model="result">
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					num1: 0,
					num2: 0 ,
					opt:"+",
					result: 0,
				},
				methods:{
					count(){
					// 方法1
						//this.result=eval(this.num1+this.opt+this.num2)
						//eval（）   将字符串按js代码执行
						
						//方法2
						switch(this.opt){
							case "+" :
								this.result =Number(this.num1)   +  Number(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>

想喝橙汁儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 简易计算器

vue 刚入门实现简易计算器如果是刚学习vue，不懂得地方可以问我哦，互相交流能更好的帮助学习。话不多说，亮代码最重要。。。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./vue.js" type="text/javascript" charset="utf-8"></script
复制链接

扫一扫