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 ...
随机推荐
- 【NOI2017】泳池
题解: 满分的笛卡尔树以后再学吧.. 40分还是比较好想的 但是状态挺复杂的 直接贴代码了 代码: #include <bits/stdc++.h> using namespace std ...
- C语言之冒泡排序、选择排序、折半查询、进制查表
菜单导航 1.冒泡排序 2.选择排序 3.折半查询 4.进制查表(十进制转二进制.八进制.十六进制) 一.冒泡排序 //1.冒泡排序 /** 一组无序数字,进行从小到大排序 冒泡排序的过程:就是每个循 ...
- Python_list部分功能介绍
x.append():在列表尾部添加一个元素 x.clear():把列表清空 x.count():判断某个元素出现的次数 x.extend():合并两个列表,或者一个元组 x.index():获取元素 ...
- js中的new Option默认选中
new Option("文本","值",true,true).后面两个true分别表示默认被选中和有效! //js默认选中 var sel = document ...
- HDU2449 Gauss Elimination 高斯消元 高精度 （C++ AC代码）
原文链接https://www.cnblogs.com/zhouzhendong/p/HDU2449.html 题目传送门 - HDU2449 题意 高精度高斯消元. 输入 $n$ 个 $n$ 元方程 ...
- Hadoop| MapReduce01 概述
概述 分布式运算程序: 优点:易于编程:良好扩展性:高容错性:适合PB级以上海量数据的离线处理: 缺点:不擅长实时计算:不擅长流式计算:不擅长DAG有向图计算: 核心思想: 1)分布式的运算程序往往需 ...
- 日志组件slf4j介绍及配置详解
http://blog.csdn.net/foreverling/article/details/51385128
- poj-1287 Networking（Prim）
题目链接:http://poj.org/problem?id=1287 题目描述: 请先参考关于prim算法求最小生成树的讲解博客:https://www.cnblogs.com/LJHAHA/p/1 ...
- CodeForces 161D Distance in Tree【树形DP】
<题目链接> 题目大意:一颗无向无环树,有n个顶点,求其中距离为k的点对数是多少,(u,v)与(v,u)为同一点对. #include <cstdio> #include &l ...
- Mysql数据库报错：Cannot add or update a child row: a foreign key constraint fails（添加多对多关系）
#创建班级表 class Classes(models.Model): title = models.CharField(max_length=32) n=models.ManyToManyField ...