Vue（九）小案例 - 百度搜索列表（跨域）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<style>
.current{
background-color:#ccc;
}
</style>
<script src="https://unpkg.com/vue"></script>
<script src="vue-resource/vue-resource.min.js"></script>
<script> window.onload=function(){
let app = new Vue({
el:'.container',
data:{
keyWord:'',
myData:{},
nowIndex:-1 //当前选中项的索引
},
methods:{
getData(e){
//如果按方向上下键，则不发送请求
if(e.keyCode==38||e.keyCode==40)
return; this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:this.keyWord
},
jsonp:'cb' //百度使用的jsonp的参数名为 cb
}).then(response => {
console.log(response.body.s);
this.myData=response.body.s; //把数据存起来
},response => {
console.log('发送失败');
})
},
changeDown(){
this.nowIndex==this.myData.length-1?this.nowIndex = -1:this.nowIndex++;
this.keyWord=this.myData[this.nowIndex];
console.log(this.nowIndex,this.myData.length);
},
changeUp(){
this.nowIndex < 0?this.nowIndex = this.myData.length-1:this.nowIndex--;
this.keyWord=this.myData[this.nowIndex];
console.log(this.nowIndex,this.myData.length);
}
}
})
} </script> </head> <body> <div class="container">
<input type="text" v-model="keyWord" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp">
<!-- 把数据存起来展示 -->
<ul>
<li v-for="(value,index) in myData" :class="{current:index==nowIndex}">
{{value}}
</li>
</ul>
<p v-show="myData.length == 0">暂无数据</p>
</div> </body> </html>
效果：
Vue（九）小案例 - 百度搜索列表（跨域）的更多相关文章
- Vue如何在webpack设置代理解决跨域问题
在开发过程中我们请求数据有时候调用的是第三方接口,此时便会遇到一个问题:跨域限制.对于跨域问题的解释就不详细叙述了,要了解的请自行百度.一般跨域问题控制台会报这个错: ...
- vue 音乐App QQ音乐搜索列表最新接口跨域设置
在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webp ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- 填个小坑，Vue不支持IE8及以下，跨域ajax不支持IE9
这特么就尴尬了,说好的Vue支持IE8及以下的呢,引入jquery,测试IE个浏览器,IE9仍然显示不正常, 然而命令行测试Vue仍然存在, 数据回不来!数据回不来!数据回不来! 好吧 肉包子打狗$ ...
- vue学习过程总结（07） - vue的后台服务API封装及跨域问题的解决
以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...
- React + fetch API + 百度地图api + 跨域 填坑
做项目遇到一个百度地图api 的跨域问题.由于使用fetch ,在调用类似 http://api.map.baidu.com/geocoder/v2/callback=renderReverse&am ...
- 【Vue+Node】解决axois请求数据跨域问题
项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错: (No 'Access-Control-Allow-Origin' header is present on th ...
随机推荐
- IDEA上创建 Maven SpringBoot+mybatisplus+thymeleaf 项目
概述 在WEB领域,Java也是在不断的探索和改进,从开始的JSP--->Struts1--->Struts2+Spring--->Spring MVC--->SpringBo ...
- Spring boot web程序static资源放在jar外部
spring boot程序的static目录默认在resources/static目录, 打包为jar的时候,会把static目录打包进去,这样会存在一些问题: static文件过多,造成jar包体积 ...
- 2016-06-19 exshop第5天
昨天对grails3和spring-security进行了全面的调研并进行了试验,试用下来发现grails3的启动速度.代码修改后刷新速度.内存占用以及架构的设计上更加合理,asset-pipelin ...
- python 类、函数的引用
类的引用 一.同级目录引用: from 文件名 import 类名 如果报错,原因基本上就是:pycharm不会将当前文件目录自动加入自己的sourse_path. 解决方法: ...
- linux运行python程序
linux下有多种方式运行python: 1. 命令行执行: 建立一个*.py文档,在其中书写python代码.之后,在命令行执行: $ python *.py 注意事项:1. 需要指明文件的 ...
- BZOJ2142 礼物 扩展lucas 快速幂 数论
原文链接http://www.cnblogs.com/zhouzhendong/p/8110015.html 题目传送门 - BZOJ2142 题意概括 小E购买了n件礼物,送给m个人,送给第i个人礼 ...
- BigDecimal的引入和概述
[代码] System.out.println(0.09 + 0.01); System.out.println(0.1 - 0.32); System.out.println(1.015 * 100 ...
- python josn包
Python josn包中的编码与解码方法 对于Python数据类型进行编码解码 json.dumps 对python的数据类型进行json格式编码 :(将dict转为json格式) eg: imp ...
- python解释器遇到if __name__=="__main__"会如何做?
python解释器遇到if __name__=="__main__"会如何做 # Threading example import time, thread def myfunct ...
- 042 spring boot在启动之后，自动关闭
在学校数据源的时候,还没有开始使用数据源,项目就关闭了. 为了学习数据源,就只能使用测试类. 但是,最近需要使用restful进行测试的时候,项目是关闭的,就很糟糕,不好进行测试. 1.日志如下: D ...