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 ...
随机推荐
- C# 之 HttpRequest 类
Request对象派生自HttpRequest类,使 ASP.NET 能够读取客户端在 Web 请求期间发送的 HTTP 值,从客户端获取信息,浏览器的种类,用户输入表单的数据,Cooki ...
- Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案 （精髓）
前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...
- python全栈开发day55-mysql外键的三种变种
一.昨日内容回顾 二.今日内容总结 三.mysql应知必会 你可以通过INFORMATION_SCHEMA.KEY_COLUMN_USAGE 表来查看. select * from INFORMATI ...
- net core体系-web应用程序-3项目结构、配置文件详解
一.应用程序文件结构 如下图所示,相比于Asp.Net项目,在新建的Asp.Net Core项目中,没有了Global.asax以及Web.config这样的文件,但多了几个其他主要的文件,它们分别为 ...
- pip安装其他包报错
pip安装时报错 Unknown or unsupported command 'install 一.是否配置了路径 配置了看下面的方法. 二.有多个pip系统不知道调用哪个. 1.where pi ...
- jquery正则表达式验证（手机号、身份证号、中文名称）
这篇文章主要介绍了jquery正则表达式验证,实现手机号.身份证号.中文名称验证,感兴趣的小伙伴们可以参考一下 本文实例需要验证的内容:中文姓名.手机号.身份证和地址,验证方法分享给大家供大家参考,具 ...
- Badboy录制Jmter脚本
提纲 1.特性和用途 2.下载和安装 3.界面介绍 4.录制脚本(注意:badboy默认是打开就开始录制,需要在step双击后进行取消默认设置) 5.添加断言(参数化设置,注意:badboy默认只运行 ...
- 我今天遇到的条件语句Integer类型的
两个Integer类型的值进行比较时,应该用equals进行判断,用"=="判断是错误的,后来想了一下就明白了,Integer毕竟是对象, 而不是int基本数据类型,可以直接比较, ...
- Java 之 JQuery
1.JQuery a.定义:jQuery 是一个 JavaScript 库 b.作用:极大地简化了 JavaScript 编程 c.引入: <script src="jquery.js ...
- python专题 --- 递归
如果一个函数在函数内部调用自身本身,这个函数就是递归函数 举例如阶乘函数,其数学递归定义如下: 对应的算法实现 def fact(n): if n==1: return 1 return n * fa ...