用vue框架写一个简易(简陋)计算器

最近开始接触Vue.js框架

来写一个简易的计算机案例吧

代码:

!+tab 快速生成一个页面

<!DOCTYPE html>
<html>
	<head>
		<meta  charset = UTF-8/>
		<title>简易计算器</title>
	</head>
	<body>
	</body>
</html>

然后我们利用<script src="">引入vue模块:
在head标签中写:

<script  src="./lib/vue.js"></script>

./lib/vue.js 是我的vue.js文件所在的位置,写的时候可以用自己文件所在位置进行替换

<!DOCTYPE html>
<html>
	<head>
		<meta  charset = UTF-8/>
		<title>简易计算器</title>
		<script src="./lib/vue.js"></script>
	</head>
	<body>
			<div  class="app"></div>
			<script>
					var vm = new Vue({				//这是用来创建一个vue实例
							el: '#app',						//el属性是用来绑定vue要控制的区域
							data: {},						//data属性是用来存储被控制区域的数据
							methods: {}					//methods属性用来写被控制区域中用到的方法
					})
			  </script>
	</body>
</html>

然后我i们需要三个文本框,一个选择的下拉列表,一个按钮,即:

<input  type="text" >
<select>
	<option value="+">
	<option value="-">
	<option value="*">
	<option value="/">
</select>
<input  type="text" >
<input  type="bottom" >
<input  type="text" >

然后我们用v-model对需要绑定的输入输出框和运算符号进行双向绑定:

   <div id="app">
	   <input type="text" v-model="n1"/>
	   <select name="" id="" v-model="opt">
		   <option value="+">+</option>
		   <option value="-">-</option>
		   <option value="*">*</option>
		   <option value="/">/</option>
	   </select>
	   <input type="text" v-model="n2"/>
	   <input type="button" value="=" @click="calc"/>
	   <input type="text" v-model="result"/>
   </div>

在data属性内对n1,n2,result,opt赋初值:

data: {
	n1: 0,
	n2: 0,
	result: 0,
	opt: '+'
},

因为v-model是双向绑定,在view层的改变也会同步到vm层。
最后便是函数方法的编写,按钮中定义了一个鼠标单击事件@click="calc"
我么用两个方法来做:
第一种方式:

methods: {
	calc(){     //计算器算数的方法
		逻辑
		switch(this.opt){
			case '+':
				this.result = parseInt(this.n1) + parseInt(this.n2)
			break;
			case '-':
				this.result = parseInt(this.n1) - parseInt(this.n2)
			break;
			case '*':
				this.result = parseInt(this.n1) * parseInt(this.n2)
			break;
			case '/':
				this.result = parseInt(this.n1) / parseInt(this.n2)
			break;
		}
	}
}

第二种方式:
这种是简易方式:正式开发中尽量少用(用拼接的方式做)
methods: {
calc(){
var runCode = ‘parseInt(this.n1) ’ + this.opt + ’ parseInt(this.n2)’
this.result = eval(runCode)
}
}

在这里插入图片描述

这样一个简易计算器就做好了(效果如图)。
当然,如果需要再添加别的运算,添加具有新运算值的option,并将计算方法编入calc方法中即可。

第一次写博客,如有问题,戳我就ok!
欢迎批评和指正。

  • 6
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值