vue-计算器

#vue-计算器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		
		<style>
			body{
				margin: 0;
			}
			.info{
				width: 100%;
				height: 120px;
				background-color: black;
				color: white;
				text-align: right;
				
				box-sizing: border-box;
				padding-right: 10px;
				padding-top: 65px;
				font-size: 48px;
			}
			
			.btn{
				width: 25%;
				height: 50px;
				font-size: 20px;
			}
			
			.zero{
				width: 50%;
			}
			
			.operate{
				background: orange;
				color: white;
			}
			
		</style>
		
	</head>
	<body>
		
		<!-- view -->
		<div id="app">
			
			<div class="info">
				{{info}}
			</div>
			
			<div>
				<button @click="dealClick(item.title)" v-for="(item,index) in buttons" class="btn" :class="item.className">
					{{item.title}}
				</button>
			</div>
			
		</div>
		

		<script src="js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//model
			var data = {
				msg:"hello world",
				
				info:"0",
				buttons:[
					{"title":"AC","className":""},
					{"title":"+/-","className":""},
					{"title":"%","className":""},
					{"title":"/","className":"operate"},
					
					{"title":"7","className":""},
					{"title":"8","className":""},
					{"title":"9","className":""},
					{"title":"*","className":"operate"},
					
					{"title":"4","className":""},
					{"title":"5","className":""},
					{"title":"6","className":""},
					{"title":"-","className":"operate"},
					
					{"title":"1","className":""},
					{"title":"2","className":""},
					{"title":"3","className":""},
					{"title":"+","className":"operate"},
					
					{"title":"0","className":"zero"},
					{"title":".","className":""},
					{"title":"=","className":"operate"},
				]
				
			}
			
			//viewModel
			var app = new Vue({
				el:"#app",
				data:data,
				methods:{
					dealClick(title){
						//alert(title)
						var msg = this.info;
						
						if(title>=0 && title<=9){
							
							if(msg == "0"){
								msg = ""
							}
							
							msg += title
						}
						
						if(title == "+"
							||title == "-"
							||title == "*"
							||title == "/"
							){
								
							var lastChar = msg.charAt(msg.length-1)
							if(lastChar>="0"&&lastChar<="9"){
								msg += title
							}

						}
						
						if(title == "."){
							
							//判断最后一个数字字符串中是否含有.	
							var lastChar = msg.charAt(msg.length-1)
							if(lastChar>="0"&&lastChar<="9"){
								msg += title
							}
						}
						
						if(title == "="){
							var r = eval(msg);
							r = r.toString()
							msg = r
						}
						
						if(title == "AC"){
							msg = "0"
						}
						
						if(title == "+/-"){
							var r = -eval(msg);
							r = r.toString()
							msg = r
						}
						
						if(title == "%"){
							var r = eval(msg) / 100;
							r = r.toString()
							msg = r
						}
						

						this.info = msg
						
					}
				}
			})
			
		</script>
		
	</body>
</html>
猜你喜欢
