vue教程1-09 交互 vue实现百度下拉列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .gray{

            background: #ccc;

        }

    </style>

    <script src="vue.js"></script>

    <script src="vue-resource.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'body',

                data:{

                    myData:[],

                    t1:'',

                    now:-1//按上下键，当前选中

                },

                methods:{

                    get:function(ev){

                        if(ev.keyCode==38 || ev.keyCode==40)return;

                        if(ev.keyCode==13){

                            window.open('https://www.baidu.com/s?wd='+this.t1);

                            this.t1='';

                        }

                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

                            wd:this.t1

                        },{

                            jsonp:'cb'

                        }).then(function(res){

                            this.myData=res.data.s;

                        },function(){

                        });

                    },

                    changeDown:function(){

                        this.now++;

                        if(this.now==this.myData.length)this.now=-1//走到最下面那个，就返回最上面那个;

                        this.t1=this.myData[this.now];//搜索框的值对应变化

                    },

                    changeUp:function(){

                        this.now--;

                        if(this.now==-2)this.now=this.myData.length-1;

                        this.t1=this.myData[this.now];

                    }

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">

        <!--搜索框的光标会默认定位到文字前面，这里@keydown.up.prevent阻止默认事件-->

        <ul>

            <li v-for="value in myData" :class="{gray:$index==now}">

                {{value}}

            </li>

        </ul>

        <p v-show="myData.length==0">暂无数据...</p>

    </div>

</body>

</html>

vue教程1-09 交互 vue实现百度下拉列表的更多相关文章

  1. vue教程(一)-html使用vue

    前后端分离.微服务框架是当下比较流行的词汇,而vue就是前端框架的佼佼者.下面重点介绍一下vue的用法: vue起步:1.引包    2.启动new Vue({el:目的地,template:模板内容 ...

  2. vue教程2-06 过滤器

    vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...

  3. vue教程1-08 交互 get、post、jsonp

    vue教程1-08 交互 get.post.jsonp 一.如果vue想做交互,引入: vue-resouce 二.get方式 1.get获取一个普通文本数据: <!DOCTYPE html&g ...

  4. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  5. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  6. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  7. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  8. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  9. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

随机推荐

  1. 第1章 Python数据模型

    #<流畅的Python>读书笔记 # 第一部分 序幕 # 第1章 Python数据模型 # 魔术方法(magic method)是特殊方法的昵称.于是乎,特殊方法也叫双下方法(dunder ...

  2. 深入浅出javascript（五）函数

    全局函数 自定义函数 函数对象 函数的属性和方法 一.全局函数 全局函数不同于内置对象的方法(来源于网络),一共有7个,可以直接使用. escape( ).eval( ).isFinite( ).is ...

  3. 配置weblogic nodemanager管理器

    [内容提示]:看了一场皇族对阵OMG的比赛,失落 .皇族又输了..  可爱的UZI...   我承认我是逗比,看了3天节点管理器才明白点东西 .笨笨 .. 废话不多说,上图!所有的故意围绕一张图开始了 ...

  4. EL表达式总结

    EL表达式是在JSP中使用的 EL表达式的作用:简化jsp文件中的<% %>. [EL的概述] 什么是EL: 为什么学习EL: * 简化JSP的代码,而且减少<%%> 使用EL ...

  5. Java数据类型、赋值、类型转换、==运算

    数据类型 基本数据类型:即int/char等这样的数值类型,共8种 引用类型:除了基本数据类型之外都是引用类型:包括API中的类:如String.File:也包括自定义的类:如Personal.ABC ...

  6. mod与%的区别

    mod与%的区别 %与mod的区别: %出来的数有正有负,符号取决于左操作数,而mod只能是正: 所以要用%来计算mod的话就要用这样的公式:a mod b = (a % b + b) % b: 括号 ...

  7. AngularJS 过滤器 Filter

    过滤器实质是数据转换或过滤,把ViewMode中的数据转化成View层用户友好的信息.可以看做一个函数,负责接收输入,转换成输出,每次参数变化时,它就被执行,输出被视图View使用. 一.基本定义及其 ...

  8. MODBUS串行通信协议详细说明

    第一章  简介 本文详细地描述了装置在MODBUS 通讯模式下的输入和输出命令.信息和数据,以便第三方使用和开发. 1.1 串行通讯协议的目的 通信协议的作用是使信息和数据在上位机主站和装置之间有效地 ...

  9. poj2828 线段树单点更新

    Buy Tickets Time Limit: 4000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Java ...

  10. Windows下Node.js的安装与配置

    一.下载和安装 1. 前往官网https://nodejs.org/或https://nodejs.org/en/download/下载最新推荐版的Node.js,本文使用10.13.0版本. 对于W ...