前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

第五章：“来来来，为师教你”用Vue实现计算器功能

上章回顾：”累死我了，干就完了，吃饭去了0.0“

”累死我了，干就完了，吃饭去了0.0“，风尚屁颠屁颠的去找师傅吃饭去喽。

好家伙，这老头竟然在吃大鱼大肉，而风尚面前就摆着一碗米饭，一个煎蛋，一小碗咸菜。风尚直呼“好家伙，老头真行”。

“嗯哼，就这水平还想像我一样吃大鱼大肉？”老头蔑视的说道。

“本来以为你能给我整个计算器，你整了个计数器，以后吧，根据你的学习水平吃饭，水平高了吃好的，水平低了吃的次点。记住吧小伙子！给你15分钟吃饭，吃完快点来电脑室.”老头说完便起身走向电脑室。

风尚气呼呼的吃完了饭，因为生气，还吃了两碗饭。吃完也连忙去了电脑室....

风尚去了电脑室，发现老头已经坐在了自己的电脑前，便凑身站在旁边。

“来来来，为师教你”用Vue实现计算器功能：

首先写个HTML：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<input style="width: 40px;" type="number" v-model="num1">
			
			<select v-model="hao">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input style="width: 40px;" type="number" v-model="num2">
			
			<button @click="dengyu" >=</button>
			
			<input style="width: 60px;" type="text" v-model="zong" >
			
		</div>
	</body>
</html>

其次写VueJS：通过符号拼接实现计算器功能


	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
		
			data(){
				return{
					num1:0,
					num2:0,
					zong:0,
					hao:'+'
				}
			},
			methods:{
				dengyu(){
				this.zong=eval("parseInt(this.num1) " + this.hao + " parseInt(this.num2)");
				}
			}
			
		})
	</script>

实现效果： num1+“符号+-/*”+num2=结果