vue.js实现点击事件

来源：互联网发布：画画的软件手机编辑：程序博客网时间：2024/05/29 06:39
<!--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");*/}
阅读全文
0 0