vue.js实现点击事件

-->当前北京历史选择{{ history }}热门城市{{ city.text }}css代码#container{width:300px;height:180px;}/

南北北南

7317人浏览 · 2017-10-25 16:19:00

南北北南 · 2017-10-25 16:19:00 发布

<!--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.ο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;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");*/
		}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^