vue.js实现点击事件
<!--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");*/
}
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
