Vue学习之路第十篇：简单计算器的实现
程序员文章站
2022-06-18 08:46:16
前面九篇讲解了vue的一些基础知识，正所谓：学以致用，今天我们将用前九篇的基础知识，来模拟实现计算器的简单功能，项目价值不高，纯粹是为了加深掌握所学知识。 学前准备： 需要掌握JavaScript的eval()函数，其主要是用来计算某个字符串，并执行其中的 JavaScript 代码。 直接上代码（ ......
前面九篇讲解了vue的一些基础知识，正所谓：学以致用，今天我们将用前九篇的基础知识，来模拟实现计算器的简单功能，项目价值不高，纯粹是为了加深掌握所学知识。
学前准备：
需要掌握javascript的eval()函数，其主要是用来计算某个字符串，并执行其中的 javascript 代码。
直接上代码（vue.min.js 第一篇有下载链接）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>计算器功能简单模拟</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<!-- 页面代码 -->
<div id="app">
<input type="text" v-model="n1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model="n2"/>
<button @click="equal">=</button>
<input type="text" v-model="result"/>
</div>
<!-- js代码 -->
<script type="text/javascript">
var vm = new vue({
el:"#app",
data:{
n1:0,
n2:0,
opt:'-',
result:0
},
methods:{
equal(){
var optstr = 'parseint(this.n1)' + this.opt + 'parseint(this.n2)';
this.result = eval(optstr);
}
}
});
</script>
</body>
</html>
功能很简单，核心是利用双向数据绑定的原理，实现数据实时计算。n1和n2是参与计算的变量，result是计算结果，一开始都被初始化为0，操作符被初始化为减号，通过点击等于号button触发计算方法，计算的结果会被实时显示出来。计算方法中为了实现简单使用了eval()函数，其会把字符串解析出来，按照正常的计算逻辑计算结果。
每天进步一点点！
下一篇： 手机怎么拍摄星轨 手机拍摄星轨技巧分享