<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

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

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

    <script>

        window.onload=function(){

            new Vue({

                el:'body',

                data:{

                    myData:[],

                    t1:''

                },

                methods:{

                    get:function(){

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

                            wd:this.t1

                        },{

                            jsonp:'cb'

                        }).then(function(res){

                            this.myData=res.data.s;

                        },function(){

                        });

                    }

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="t1" @keyup="get()">

        <ul>

            <li v-for="value in myData">

                {{value}}

            </li>

        </ul>

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

    </div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <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()">

        <ul>

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

                {{value}}

            </li>

        </ul>

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

    </div>

</body>

</html>

vue7 下拉列表的更多相关文章

  1. jQuery 邮箱下拉列表自动补全

    综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...

  2. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  3. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

  4. Jquery、简单的下拉列表、网页左部导航菜单

    简单的下拉菜单.左部导航使用. 2016-5-13 记 效果图如下: <!DOCTYPE html> <html lang="en"> <head&g ...

  5. [WPF]带下拉列表的文本框

    控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...

  6. Android之Socket通信、List加载更多、Spinner下拉列表

    Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户端向服务器发送请求后,服务 ...

  7. JS弹出模态窗口下拉列表特效

    效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenq ...

  8. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. 下拉列表 select-option ; select-optgroup-option

    HTML中的下拉列表: <select> <option value ="1">Volvo</option> <option value  ...

随机推荐

  1. electron 新手教程 打包 exe

    1.安装nodejs(会自动安装npm) 2.桌面新建文件夹    your-app  (下面目录结构) your-app/ ├── package.json ├── main.js └── inde ...

  2. 2015 Multi-University Training Contest 1 y sequence

    Y sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  3. POJ——T2446 Chessboard

    http://poj.org/problem?id=2446 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18560   ...

  4. 洛谷 P2960 [USACO09OCT]Milkweed的入侵Invasion of the Milkweed

    P2960 [USACO09OCT]Milkweed的入侵Invasion of the Milkweed 题目描述 Farmer John has always done his best to k ...

  5. mysql中文乱码解决方式

    近期项目使用到mysql.却突然出现了中文乱码问题.尝试了多种方案,最终解决乱码问题,总结一下解决方式,给遇到同样问题的人一点參考. 中文乱码的原因 1.安装mysqlserver的时候编码集设定有问 ...

  6. hadoop-09-安装资源上传

    hadoop-09-安装资源上传 在/software/www/html 下面上传 ambari  HDP  HDP-UTILS-1.1.0.21 文件,之后解压:

  7. [React Native] Dismiss the Keyboard in React Native

    In this lesson you will learn how create a re-usable component that gives the user the ability to di ...

  8. Woody的Python学习笔记4

    Python模块 Import语句 想要使用Python源文件,仅仅须要在还有一个源文件中运行import语句.语法例如以下: import module1 当解释器遇到import语句.假设模块在当 ...

  9. linux 下同步异步，堵塞非堵塞的一些想法

    补充: 发现一个更好的解释样例:同步是一件事我们从头到尾尾随着完毕.异步是别人完毕我们仅仅看结果. 堵塞是完毕一件事的过程中可能会遇到一些情况让我们等待(挂起).非堵塞就是发生这些情况时我们跨过. 比 ...

  10. 关于有的Apk无法反编译的探究

    Android的apk包,其实就是zip包,只不过后缀名换了而已!使用“好压”等解压缩工具解压,就可以看到里面的内容了.简单介绍一下吧. 以下就是解压出来的apk的内容: 其中: assets     ...