<!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. javaScript事件（八）事件类型之变动事件

    DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...

  2. bzoj2969矩形粉刷

    题解: 和前面那个序列的几乎一样 容斥之后变成求不覆盖的 然后再像差分的矩形那样 由于是随便取的所以这里不用处理前缀和直接求也可以 代码: #include <bits/stdc++.h> ...

  3. grails服务端口冲突解决办法-【grails】

    grails中默认的服务端口为,当本机中需要同时启动两个不同的项目时,就会造成端口冲突,比如启动第二个服务时就会报如下的错误: Server failed to start for port 8080 ...

  4. Codeforces 633F The Chocolate Spree 树形dp

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

  5. Codeforces 442D Adam and Tree dp (看题解)

    Adam and Tree 感觉非常巧妙的一题.. 如果对于一个已经建立完成的树, 那么我们可以用dp[ i ]表示染完 i 这棵子树, 并给从fa[ i ] -> i的条边也染色的最少颜色数. ...

  6. php第二天 开始连接数据库

    php连接数据库有三种方法,分别是mysqli面向对象,mysqli面向过程,pdo. 1.查了资料,最终选择则了mysqli面向过程的方式,运行效率应该要高一些. 代码如下 <?php $se ...

  7. SPOJ LCS2 - Longest Common Substring II 字符串 SAM

    原文链接http://www.cnblogs.com/zhouzhendong/p/8982484.html 题目传送门 - SPOJ LCS2 题意 求若干$(若干<10)$个字符串的最长公共 ...

  8. 队列queue的一些操作

    1. q = queue.Queue(5) 实例化,5为队列长度 2. q.put("haha") 将数据加入队列,计数器+1 3. q.get() 取出数据,计数器不变 4. q ...

  9. 查出了a表，然后对a表进行自查询，a表的别名t1，t2如同两张表，因为t1，t2查询的条件不一样，真的如同两张表，关联两张表，可以将两行或者多行数据合并成一行，不必使用wm_concat()函数。为了将t2表的数据全部查出来使用了右连接。

    with a as( select nsr.zgswj_dm, count(distinct nsr.djxh) cnt, 1 z from hx_fp.fp_ly fp, hx_dj.dj_nsrx ...

  10. Python3.4+Django1.9+Bootstrap3

    实现和原理 Python集成Django开发框架后,可以通过在cmd命令提示符下建立工程,工程名为learn_models 1 django-admin.py startproject learn_m ...