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. caffe 笔记

    caffe模块: blob:caffe中数据的封装,用于layer上流动 layer:输入层.输出层.神经网络层的抽象 net:神经网络结构,将layer层叠关联起来 solver:定义神经网络训练和 ...

  2. SQL语句之奇形怪状的冷门函数

    lag() over() ) OVER(ORDER BY C.column) FROM Table C; 第一条记录已经无法再取前一条记录,所以LAG()函数返回空. SQL为意思如下. LAG(C. ...

  3. 作用域的一些说明,static关键词

    作用域的一些说明 变量分为全局变量和局部变量.学过C语言的童鞋都知道,全局变量的作用域是整个整个文件.在即使在函数内部也有效,但在php中,如果在函数中使用全局变量,php会认为这个变量没有定义.如果 ...

  4. VGA的行场时序

    之前碰到接收VGA时有的电脑可以有的电脑会出现画面偏移. 先来了解下数字显示器时序(DMT) DMT视频时序有四种: (1)Positive H & Positive V Syncs 行同步为 ...

  5. linux上搭建solr（用jetty部署）

    环境搭建:centos7及solr7版本 描述:最新版本的solr内置了jetty容器,可以支持jetty部署,从而不需要发布到tomcat下面 首先同样先在/usr/local/mypackage上 ...

  6. UIKit-UIBezierPath

    UIBezierPath精讲 http://www.henishuo.com/uibezierpath-draw/ iOS UIBezierPath类 介绍 http://justsee.iteye. ...

  7. python操作Hbase

    本地操作 启动thrift服务:./bin/hbase-daemon.sh start thrift hbase模块产生: 下载thrfit源码包:thrift-0.8.0.tar.gz 解压安装 . ...

  8. nodeclub route

    这里是把web_router.js放在根目录下,也可以放在routes文件件下,其实都可以. 这里就是一些url与controller和middleware对应

  9. 转：log4j的使用简介

    spring使用log4j,可以有2种方法. 1.在web.xml里不做任何配置. log4j.properties放在classpath根目录下, 这时候生成的日志文件就没有相对路径,如果写相对路径 ...

  10. 微信WeixinJSBridge API使用实例

    http://www.jb51.net/article/66642.htm 这篇文章主要介绍了微信WeixinJSBridge API使用实例,本文直接给出HTML代码,代码中包含了很多实用功能,如图 ...