<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Linkhref=".. /.. /plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css "rel= "stylesheet"type= "Text/css"> <Scriptsrc= "./vue.js"></Script> <Scriptsrc= "./vue-resource.js"></Script> <Scriptsrc=".. /.. /plugins/jquery-1.9.1.min.js "></Script> <Scriptsrc=".. /.. /plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js "></Script> <title>Vuejs2.0 Demo</title> <title>Title</title> <styletype= "Text/css">. Gray{background:Red; } </style></Head><Body><DivID= "App"> <inputtype= "text"value= "{{keyword}}"class= "Form-control"V-model= "keyword"@keyup= "Get ($event);"@keydown. Down= "Changedown ()"@keydown. up= "changeup ()"> <ul> <Liv-for= "(Value,index) in MyData": Class= "{Gray:index==now}">{{value}}</Li> </ul> <PV-show= "Mydata.length==0">No data ...</P></Div><Script>window.onload=function(){ varMV= NewVue ({el:"#app", data:{mydata:[], keyword:"", now:-1}, methods:{get:function(EV) {if(Ev.keycode== - ||Ev.keycode== +){ return false; } This. $http. JSONP ("Https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", {wd: This. KEYWORD},{JSONP:"CB"}). Then (function(res) { This. MyData=Res.data.s; Console.log ("Success"); },function() {Console.log ("failed"); }); }, Changedown:function(){ This. Now++; if( This. Now== This. Mydata.length) { This. Now= -1; } This. Keyword= This. mydata[ This. now]; }, Changeup:function(){ This. Now--; if( This. Now==-2){ This. Now= This. Mydata.length-1; } This. Keyword= This. mydata[ This. now]; } } }); };</Script></Body></HTML>
Vuejs Search drop-down box