利用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>
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
