用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
    评论
好的,下面是一个简单的Vue计算器示例,已经加上了注释: ```html <template> <div> <h1>简易计算器</h1> <div> <input type="text" v-model="result" disabled /> </div> <div> <button @click="addNumber(1)">1</button> <button @click="addNumber(2)">2</button> <button @click="addNumber(3)">3</button> <button @click="addOperator('+')">+</button> </div> <div> <button @click="addNumber(4)">4</button> <button @click="addNumber(5)">5</button> <button @click="addNumber(6)">6</button> <button @click="addOperator('-')">-</button> </div> <div> <button @click="addNumber(7)">7</button> <button @click="addNumber(8)">8</button> <button @click="addNumber(9)">9</button> <button @click="addOperator('*')">*</button> </div> <div> <button @click="addNumber(0)">0</button> <button @click="clear">C</button> <button @click="calculate">=</button> <button @click="addOperator('/')">/</button> </div> </div> </template> <script> export default { data() { return { result: "", // 计算结果 currentNumber: "", // 当前输入的数字 operator: "", // 当前操作符 isOperatorClicked: false, // 是否点击了操作符 }; }, methods: { // 添加数字 addNumber(number) { if (this.isOperatorClicked) { // 如果已经点击了操作符,则清空当前数字 this.currentNumber = ""; this.isOperatorClicked = false; } this.currentNumber += number; this.result += number; }, // 添加操作符 addOperator(operator) { if (this.operator !== "") { // 如果已经有操作符,则计算结果 this.calculate(); } this.operator = operator; this.isOperatorClicked = true; this.result += operator; }, // 计算结果 calculate() { if (this.operator === "+") { this.result = String( Number(this.result) + Number(this.currentNumber) ); } else if (this.operator === "-") { this.result = String( Number(this.result) - Number(this.currentNumber) ); } else if (this.operator === "*") { this.result = String( Number(this.result) * Number(this.currentNumber) ); } else if (this.operator === "/") { this.result = String( Number(this.result) / Number(this.currentNumber) ); } this.currentNumber = ""; this.operator = ""; this.isOperatorClicked = true; }, // 清空计算器 clear() { this.result = ""; this.currentNumber = ""; this.operator = ""; this.isOperatorClicked = false; }, }, }; </script> ``` 这个计算器支持加、减、乘、除四个基本运算,可以在输入数字后点击操作符进行计算,也可以在输入数字后继续输入数字,直到点击操作符进行计算。点击 C 按钮可以清空计算器

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值