利用vue-resource模拟百度下拉列表
生活随笔
收集整理的這篇文章主要介紹了
利用vue-resource模拟百度下拉列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近還在vue的路上匍匐前進，這個是昨天晚上看智能社的視頻學習做的一個小小的demo.
百度下拉列表
先上圖：
利用的是jsonp來獲取的數據：
這部分代碼如下：
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:this.t1
},
jsonp:'cb'
}
).then(response => {
console.log(response.body.s);
this.showData = response.body.s;
},response =>{
console.log('出錯啦啦啦！')
})
加寫了個鍵盤上下事件.
最后的效果：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style> .gray{ background: gray; } </style> </head><body><script type="text/javascript" src="js/vue.js" ></script><script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script><div id='app'><input type="text" @keyup="getData($event)" v-model="t1" @keyup.up.prevent="changeUp()" @keydown.down="changeDown()"><ul><li v-for="(value,index) in showData" :class="{gray:index==now}">{{value}}</li></ul></div><script type="text/javascript">new Vue({el:'#app',data:{t1:'',showData:[],now:-1},created(){this.getData();},methods:{getData:function(ev){this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{params:{wd:this.t1},jsonp:'cb'}).then(response => {console.log(response.body.s);this.showData = response.body.s;},response =>{console.log('出錯啦啦啦！')})},changeDown:function(){this.now++;if(this.now == this.showData.length){this.now = -1;}this.t1 = this.showData[this.now];},changeUp:function(){this.now--;if(this.now == -2){this.now = this.showData.length-1;}this.t1=this.showData[this.now];}},})</script></body> </html>每天學習一點點，進步一點點。
轉載于:https://www.cnblogs.com/zylily/p/9178997.html
總結
以上是生活随笔為你收集整理的利用vue-resource模拟百度下拉列表的全部內容，希望文章能夠幫你解決所遇到的問題。
