首页 > 代码库 > vue学习之二
vue学习之二
百度下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./lib/bootstrap.min.css"> <script src="./lib/jquery-1.7.2.js"></script> <script src="./lib/bootstrap.js"></script> <script src="./lib/vue.js"></script> <script src="./lib/vue-resource.js"></script> <style> .g{ background: rgba(0,0,0,.4); } </style> <script> window.onload=function(){ var vue=new Vue({ el:"#box", data:{ t1:"", nowIndex:-1, myData:[] }, methods:{ get:function(ev){ if(ev.keyCode==38||ev.keyCode==40){ return ; }else if(ev.keyCode==13){ window.open("https://www.baidu.com/s?wd="+this.t1); } this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{ wd:this.t1 },{ jsonp:"cb" }).then(function(rps){ if(rps.ok==true){ this.myData=rps.data.s; } },function(err){}); }, changeDown:function(){ this.nowIndex++; if(this.nowIndex>=this.myData.length){ this.nowIndex=0; } this.t1=this.myData[this.nowIndex]; }, changeUp:function(){ this.nowIndex--; if(this.nowIndex<0){ this.nowIndex=this.myData.length-1; } this.t1=this.myData[this.nowIndex]; } } }); } </script> </head> <body> <div id="box"> <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()"> <ul> <li v-for="(val,index) in myData" :class="{g:index==nowIndex}">{{val}}</li> </ul> <p v-show="myData.length==0">无数据...</p> </div> </body> </html>
vue学习之二
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。