vue.js实现点击事件

创建时间：2017-10-25 投稿人：浏览次数：1125

<!--html代码-->

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/font-icons.css">
		<link rel="stylesheet" href="../css/position.css">
		<script src="../js/summer.js" ></script>		
		<script src="../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/knockout-2.2.0.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		
		<script src="http://webapi.amap.com/maps?v=1.4.0&key=您申请的key值"></script> 
		<script src="../js/position.js" ></script>
	</head>
	<body style="background-color: #e2e0e2;height:100%;">
		<div id="navi" >
		<!-- 创建一个展示地图的容器<div id="container"></div> -->
			
			<!-- 当前 -->
			<div >当前</div>
			<div id="navi1"><div class="frame">北京</div></div>
			<!-- 历史选择 -->
			<div id="his" style="clear:both;" v-show="l">历史选择</div>
			<div id="navi2">
				<div class = "frame1" v-for="history in historys">{{ history }}</div>
			</div>
			<!-- 热门城市 -->
			<!--vue.js的注意事项：渲染语句不能与绑定的id同级放置-->
			<div style="clear:both;">热门城市</div>
			<div id="navi3" >						
					<a>
						 <div class="frame" v-for="(city,k) in citys" v-on:click="change(k)">{{ city.text }}</div>
						
					</a>		
			</div>
		</div>	
	</body>
</html>

css代码

#container{
	width:300px;
	height:180px;
}

/* 显示地址的框的样式的设置 */
.frame{
	background-color: #f3f3f5;
	border-radius:4px;
	float:left;
	width:95px;
	margin-left:4%;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	border:#D8D8D8 solid 1px;
	line-height: 25px;
}
.frame1{
	background-color: #f3f3f5;
	border-radius:4px;
	float:left;
	width:95px;
	margin-left:4%;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	border:#D8D8D8 solid 1px;
	line-height: 25px;
}

#navi1{
	clear:both;
	background-color: white;
}

#navi2{
	clear:both;
/* 	background-color: white; */
	width:100%;
	max-height:80px;
	overflow-y:hidden;
}

#navi3{
	clear:both;
	background-color: white;
	height:260px;
}

//javascript 代码
window.onload=function(){
			var vm = new Vue({
  				el: "#navi",
 				data: {
 					l : "",
 					historys: [],
   					citys: [
     			 { text: "北京" },{ text: "上海" }, { text: "广州" },{ text: "杭州" },
      			 { text: "哈尔滨"},{ text: "青岛" },{ text: "西安" },{ text: "南京" },
      			 { text: "深圳" },{ text: "昆明" },{ text: "桂林" },{ text: "三亚" },
      			 { text: "长沙" },{ text: "武汉" },{ text: "沈阳" },{ text: "厦门" },
      			 { text: "成都" },{ text: "重庆" },{ text: "大连" },{ text: "济南" },
      			 { text: "郑州" }
  			  ]
 			 },
 			 	methods: {
 			 		change: function(k){
 			 			//var frame = document.getElementsByClassName("frame")[k];
 			 			var frame = this.citys[k].text;
 			 			this.l = this.historys.length+1;
 			 			for(var i = 0;i<this.historys.length;i++){
 			 				if(this.historys[i]==frame){
 			 					this.historys.splice(i,1);
 			 				}
 			 			}
 			 			 this.historys.unshift(frame);
 			 		} 	
 			 	}
		});	
		
		
		/*var w = document.body.clientWidth;
		var l = vm.historys.length;
		 	if(l>0){
				document.getElementById("his").css("display","block");
			}
		var n = Math.ceil(l/Math.floor(w/97))+1;
		var b = (n*30)+"px";
		$("#navi2").css("height","b");*/
		}

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。