利用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模拟百度下拉列表相关推荐

H5 vue实现百度下拉列表交互操作示例
给大家分享一篇关于vue实现百度下拉列表交互操作示例的详细介绍,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧. www.jb51.net vue百度下拉列表 .gray{ backg ...
Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
C#操作IE浏览器(打开url、获取浏览器地址栏的地址、模拟百度搜索)
下面的代码参考 https://www.cnblogs.com/kissdodog/p/3725774.html,非我原创,所以就标为转载注意:下面的方法只适用于系统自带的IE浏览器,其它浏览器不适 ...
JS模拟百度搜索框和选项卡
练习1 实现搜索框内,输入相关数字,在下方显示相关内容,模拟百度搜索,详细代码如下: <!DOCTYPE html> <html lang="en">< ...
vue 中使用百度cyberplayer播放器遇到的坑
####上次用了百度cyberplayer播放器也做了一些介绍,在使用的过程中遇到了一些问题.播放器和vue都有一点写法的问题 1.频繁点击视频进入播放页面后再返回首页,会出现上个视频的音频和当前视屏 ...
vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫现在也是体会到了,学新的东西还是得看官方文档 ...
linux环境下，模拟百度网盘上传、下载文件
目录 1.题目 2.运行截图 3.总体设计 4.详细设计 5.源码 5.1服务端 5.2客户端 1.题目 1)模仿百度网盘实现一个文件上传.下载.浏览的终端网盘; 2)能够实现文件和目录的存储; 3) ...

利用vue-resource模拟百度下拉列表

利用vue-resource模拟百度下拉列表相关推荐

最新文章

热门文章