<!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. C#版本与Framework的关系

    C# 1.0 released with .NET 1.0 and VS2002 (January 2002) C# 1.2 (bizarrely enough); released with .NE ...

  2. L1与L2正则(转)

    概念: L0范数表示向量中非零元素的个数:NP问题,但可以用L1近似代替. L1范数表示向量中每个元素绝对值的和: L1范数的解通常是稀疏性的,倾向于选择:1. 数目较少的一些非常大的值  2. 数目 ...

  3. 清北合肥day1

    题目: 1.给出一个由0,1组成的环 求最少多少次交换(任意两个位置)使得0,1靠在一起 n<=1000 2.两个数列,支持在第一个数列上区间+1,-1 每次花费为1 求a变成b的最小代价 n& ...

  4. UICollectionViewController的用法1

    UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableVie ...

  5. H.265：网络视频的高清时代

    去年八月,爱立信公司推出了首款H.265编解码器,而在仅仅六个月之后,国际电联(ITU)就正式批准通过了HEVC/H.265标准,标准全称为高效视频编码(High Efficiency Video C ...

  6. flink的Standalone集群安装

    1:上传安装包到linux系统 使用rz命令 2:解压 tar –zxvf flink-1.5.0-bin-hadoop24-scala_2.11.tgz 3:修改配置文件 vim conf/flin ...

  7. 大数据-kafka

    1Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 作用:1发布和订阅消息流,这个功能类似于消息队列,这也是kafka归类为消息队列框架的原因 2以容错 ...

  8. PAT (Basic Level) Practise - 继续(3n+1)猜想

    题目链接:https://www.patest.cn/submissions/4414905 1005. 继续(3n+1)猜想 (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限 ...

  9. 初窥Java之五

    一.方法 1.语法格式 修饰符  返回值类型 方法名(形参列表){ 方法体 } 2.返回值类型 返回值类型可以时:1.void(无返回值) 2.8大基本数据类型中的任意一种 3.引用数据类型中的任意一 ...

  10. HierarchicalClustering：编写HierarchicalClustering层次聚类算法—Jason niu

    from numpy import * class cluster_node: def __init__(self,vec,left=None,right=None,distance=0.0,id=N ...