<!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. ubuntu多版本cuda并存与切换【两个博客链接】

    https://bluesmilery.github.io/blogs/a687003b/ https://blog.csdn.net/Maple2014/article/details/785742 ...

  2. Codeforces 633F The Chocolate Spree 树形dp

    The Chocolate Spree 对拍拍了半天才知道哪里写错了.. dp[ i ][ j ][ k ]表示在 i 这棵子树中有 j 条链, 是否有链延伸上来. #include<bits/ ...

  3. 删除ELK中的数据。。

    直接使用这个命令就行了: curl -XDELETE "http://127.0.0.1:9200/logstash-2017.08.19" 2017.08.19可以动态生成,   ...

  4. Java集合—Set集和Map集

    一.Set集合 1.概述 Set集合无序的.不可重复的元素(无序是指索引) Set集合不按照特定的方法进行排序,只是将元素放在集合中. 下面介绍一下Set集合的HashSet和TreeSet两个实现类 ...

  5. RF：RF实现根据乳腺肿瘤特征向量高精度(better)预测肿瘤的是恶性还是良性—Jason niu

    %RF:RF实现根据乳腺肿瘤特征向量高精度(better)预测肿瘤的是恶性还是良性 load data.mat a = randperm(569); Train = data(a(1:500),:); ...

  6. Codefoces Gym 101652 【最大连续和】

    <题目链接> 题目大意: 给你一段只由 'B'和'R'组成的字符串,问你在连续的区间内,"B"和"R"的差值最大是多少,输出该区间:如果对于差值相等 ...

  7. 003.Ansible基础使用

    一 Ansible命令用法 Ansible命令行执行方式有:Ad-Hoc.Ansible-playbook两种,Web方式其官方提供付费产品Tower.Ad-Hoc主要用于临时命令的执行,Ansibl ...

  8. Spring BPP中优雅的创建动态代理Bean

    一.前言 本文章所讲并没有基于Aspectj,而是直接通过Cglib以及ProxyFactoryBean去创建代理Bean.通过下面的例子,可以看出Cglib方式创建的代理Bean和ProxyFact ...

  9. mysql数据库操作语句整合

    查看版本:select version();显示当前时间:select now(); 注意:在语句结尾要使用分号; 远程连接 一般在公司开发中,可能会将数据库统一搭建在一台服务器上,所有开发人员共用一 ...

  10. vs2008单元测试

    调试是解决错误的过程,测试是发现软件缺陷的过程.每一个软件在交付使用时前都必须经过测试.软件测试是软件开发的重要组成部分,现在已经发展成专门的技术. 在消除了程序中的语法错误和运行错误后,程序仍然不能 ...