<!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. Elasticsearch集群

    详细Elasticsearch安装: https://www.cnblogs.com/littlehb/p/8406378.html 安装之前需先优化内核: https://www.cnblogs.c ...

  2. Windows Azure 搭建网络代理 Proxy

    额 题目起的有点大 其实就是在 Linux 上使用代理 不过是用的 Azure 上的 Liunx 虚拟机而已 如何在 Azure 上搭建 VPN 见上篇:http://www.cnblogs.com/ ...

  3. Docker Client （another java docker client api）

    前一篇提到了docker-java,这里介绍另一个docker client 库,Docker Client 版本兼容 兼容17.03.1~ce - 17.12.1~ce (点 [here][1]查看 ...

  4. Flink--time-window 的高级用法

    1.现实世界中的时间是不一致的,在 flink 中被划分为事件时间,提取时间,处理时间三种. 2.如果以 EventTime 为基准来定义时间窗口那将形成 EventTimeWindow,要求消息本身 ...

  5. day10.函数进阶

    函数的命名空间 从python解释器开始执行之后,就在内存中开辟了一个空间,每当遇到一个变量的时候,就把变量名和值之间的对应关系记录下来. 但是当遇到函数定义的时候解释器只是象征性的将函数名读入内存, ...

  6. Codeforces 342D Xenia and Dominoes 状压dp

    码就完事了. #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define ...

  7. 51Nod1766 树上的最远点对 ST表 LCA 线段树

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1766.html 题目传送门 - 51Nod1766 题意 n个点被n-1条边连接成了一颗树,给出a~ ...

  8. 给定数组长度2n，分成n对，求n对最小元素之和最大

    给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最大. 示例 ...

  9. 065 updateStateByKey的函数API

    一:使用场景 1.应用场景 数据的累加 一段时间内的数据的累加 2.说明 每个批次都输出自己批次的数据, 这个时候,可以使用这个API,使得他们之间产生联系. 3.说明2 在累加器的时候,起到的效果和 ...

  10. Codeforces 920F - SUM and REPLACE 【线段树】

    <题目链接> 题目大意: 给你一个序列,有两个操作,一个是求区间 l - r 的和,另一个是对区间l-r的元素修改值,x=d(x),d(x)为x的因子个数. 解题分析: 因为可能有多次修改 ...