vue.js实现点击事件

	
		
		
		
		
		
				
		
		
		
		
		 
		
	
	
		

		
			
			
			
当前
			
北京
			
			
历史选择
			

				
{{ history }}
			
			
			
			
热门城市
			
						
					
						 
{{ city.text }}
						
							
			
		
	
	

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.οnlοad=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;i0){
				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");*/
		}