Vue學習之路第十篇：簡單計算器的實現
阿新 • • 發佈：2019-01-27
oct color 實現 mode 初始化 要掌握 原理 content method
前面九篇講解了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
功能很簡單，核心是利用雙向數據綁定的原理，實現數據實時計算。n1和n2是參與計算的變量，result是計算結果，一開始都被初始化為0，操作符被初始化為減號，通過點擊等於號button觸發計算方法，計算的結果會被實時顯示出來。計算方法中為了實現簡單使用了eval()函數，其會把字符串解析出來，按照正常的計算邏輯計算結果。
每天進步一點點！
Vue學習之路第十篇：簡單計算器的實現