vuejs基础-计算器案例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="n1"/>
			<select 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="abc1"/>
			<input type="text" v-model="result"/>
		</div>
	</body>
	
	<script>
		new Vue({
			el:"#app",
			data:{
				n1:0,
				opt:'+',
				n2:0,
				result:0
			},
			methods:{
				abc(){
					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;
					}
				},
				abc1(){
					var stringopt = "parseInt(this.n1)" + this.opt + "parseInt(this.n2) ";
					this.result = eval(stringopt);
				}
			}
		});
	</script>
</html>

　　

posted @ 2019-07-23 12:52  eadela  阅读(269)  评论(0)    收藏  举报