<!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（九）小案例 - 百度搜索列表（跨域）的更多相关文章

  1. Vue如何在webpack设置代理解决跨域问题

            在开发过程中我们请求数据有时候调用的是第三方接口,此时便会遇到一个问题:跨域限制.对于跨域问题的解释就不详细叙述了,要了解的请自行百度.一般跨域问题控制台会报这个错:         ...

  2. vue 音乐App QQ音乐搜索列表最新接口跨域设置

    在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webp ...

  3. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  4. 填个小坑，Vue不支持IE8及以下，跨域ajax不支持IE9

    这特么就尴尬了,说好的Vue支持IE8及以下的呢,引入jquery,测试IE个浏览器,IE9仍然显示不正常, 然而命令行测试Vue仍然存在, 数据回不来!数据回不来!数据回不来! 好吧  肉包子打狗$ ...

  5. vue学习过程总结（07） - vue的后台服务API封装及跨域问题的解决

    以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...

  6. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  7. Vue.js——基于$.ajax实现数据的跨域增删查改

    转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...

  8. React + fetch API + 百度地图api + 跨域 填坑

    做项目遇到一个百度地图api 的跨域问题.由于使用fetch ,在调用类似 http://api.map.baidu.com/geocoder/v2/callback=renderReverse&am ...

  9. 【Vue+Node】解决axois请求数据跨域问题

    项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错: (No 'Access-Control-Allow-Origin' header is present on th ...

随机推荐

  1. UE4 日志

    第一种 输出在控制台中,需要在启动之后的游戏窗口中点击~以打开控制台,然后输入showlog,这时候会弹出一个cmd日志窗口.在程序中使用代码 UE_LOG(LogTemp, Warning, TEX ...

  2. ExceptionLess本地环境部署

    1.先去看看github上面本地流程说明 https://github.com/exceptionless/Exceptionless/wiki/Self-Hosting 比较总要的环境有 NET 4 ...

  3. [转] js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  4. POJ 3713 Transferring Sylla【Tarjan求割点】

    题意:给出一个无向图,判断是否任意两点间都存在至少3条互相独立的路,独立指公共顶点只有起点和终点.算法:枚举每个点,删去后用Tarjan判断图中是否存在割点,如果存在则该图不满足三连通性.Tarjan ...

  5. HDU 1074 Doing Homework（DP状态压缩）

    题意:有n门功课需要完成,每一门功课都有时间期限以及你完成所需要的时间,如果完成的时间超出时间期限多少单位,就会被减多少学分,问以怎样的功课完成顺序,会使减掉的学分最少,有多个解时,输出功课名字典序最 ...

  6. 期货大赛项目|二,DAL详解

    接口层就不重点讲述了,直接DAL层 DAL层 using System; using System.Collections.Generic; using System.Linq; using Syst ...

  7. Spring MVC基础知识整理➣国际化和异常处理

    概述 Spring框架为WEB项目提供了国际化以及异常处理机制.所谓的国际化也就是不同国籍,显示不同国籍的语言与符号.异常处理,也就是能够捕获WEB项目下的所有异常信息,并能处理记录这些异常信息机制. ...

  8. FATAL ERROR: please install the following Perl modules before executing ./mysql_install_db: Data::Dumper

    今天安装本地数据库,所遇到的错误 FATAL ERROR: please install the following Perl modules before executing ./mysql_ins ...

  9. JavaScript将数字转换为大写金额

    用JavaScript将数字转换为大写金额,好了 0.0 To code! var digitUppercase = function(n) { var fraction = ['角', '分']; ...

  10. html-盒子模型及pading和margin相关

    margin: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...