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

最新推荐文章于 2023-04-02 21:46:58 发布

乌鸦不吃盖浇饭

最新推荐文章于 2023-04-02 21:46:58 发布

阅读量3.1k

点赞数 6

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_42791260/article/details/100653643

版权

最近开始接触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框架写一个简易(简陋)计算器

最近开始接触Vue.js框架来写一个简易的计算机案例吧代码：!+tab 快速生成一个页面简易计算器然后我们利用JavaScript要引入vue模块：在head标签中写：./lib/vue.js 是我的vue.js文件所在的位置，写的时候可以用自己文件所在位置进行替换简易计算器然后我i们需要三个文本框，一个选择的下拉列...
复制链接

扫一扫