<!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. c标签迭代Map

    <%@ page import="java.util.Map" %> <%@ page import="java.util.HashMap" ...

  2. C语言实现简化的正则表达式

    语法: 正则表达式和待匹配字符串都是一行 "^" 标记正则表达式的开始 "$" 标记正则表达式的结束 "*" 匹配前面的子表达式零次或多次 ...

  3. KVM 日常使用命令

    [root@Eren liwm]# ps ax | grep kvm  681 ?        S<     0:00 [kvm-irqfd-clean]17597 pts/0    S+   ...

  4. 紫书 例题8-13 UVa 11093 （反证法）

    这道题发现一个性质就解决了 如果以i为起点, 然后一直加油耗油, 到p这个地方要去p+1的时候没油了, 那么i, i+1, --一直到p, 如果以这些点 为起点, 肯定也走不完. 为什么呢? 用反证法 ...

  5. 【图灵杯 E也即POJ 3368】简单的RMQ

    Description 给定一个数组,其中的元素满足非递减顺序.任意给定一个区间[i,j],求其中某个元素重复出现的最大次数. Input 多组数据输入.每组数据的第一行包含两个整数n和q(1< ...

  6. Android 取得 ListView中每个Item项目的值

    首先我们须要创建 ListView .这里假定我们已经创建好了而且使用SimpleAdapter设置好了adapter数据,看一下我们的adapter ArrayList<HashMap< ...

  7. [JAVA &#183; 0基础]：3.转义字符

    定义 全部的ASCII码都能够用"\"加数字(通常是8进制数字)来表示.而C中定义了一些字母前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\ ...

  8. opecv2 MeanShift 使用均值漂移算法查找物体

    #if !defined OFINDER #define OFINDER #include <opencv2\core\core.hpp> #include <opencv2\img ...

  9. 几种常见sqlalchemy查询：

        #简单查询     print(session.query(User).all())     print(session.query(User.name, User.fullname).all ...

  10. bzoj1009: [HNOI2008]GT考试（kmp+矩阵乘法）

    1009: [HNOI2008]GT考试 题目:传送门 题解: 看这第一眼是不是瞬间想起组合数学??? 没错...这样想你就GG了! 其实这是一道稍有隐藏的矩阵乘法,好题! 首先我们可以简化一下题意: ...