利用Vue 进行百度模糊查询接口进行相关模糊查询
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <div> <input type="text" v-model="t1" @keyup="jsonp();"/> <ul> <li v-for="(v,k) in tips">{{v}}</li> </ul> </div> </div> <script src="js/vue2.5.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vue = new Vue({ el:'#app', data:{ t1:'', tips:[] }, methods:{ jsonp:function(){ //百度联想查询接口 var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'; //改变jsonp的callback(跨域函数请求)为cb this.$http.jsonp(url,{wd:this.t1},{jsonp:'cb'}).then(function(response){ this.tips = response.data.s; },function(response){ alert('请求失败， ' + response.status); }); } } }); </script> </body> </html>