<!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. mysql和mongodb的区别

    1.mongodb的概括 MongoDB(文档型数据库):提供可扩展的高性能数据存储 2.mongodb的功能概括 (1)基于分布式文件存储 (2)高负载情况下添加更多节点,可以保证服务器性能 (3) ...

  2. ES 新增字符串方法

    话不多说,直接开鲁 1. startsWith() 作用: 检测字符串以什么开头 实例: let str = "www.qjzzj.top"; console.log(str.st ...

  3. [POJ2823][洛谷P1886]滑动窗口 Sliding Window

    题目大意:有一列数,和一个窗口,一次能框连续的s个数,初始时窗口在左端,不断往右移动,移到最右端为止,求每次被框住的s个数中的最小数和最大数. 解题思路:这道题是一道区间查询问题,可以用线段树做.每个 ...

  4. 用centos镜像 制作本地yum源

    1.上传iso镜像 2.挂载镜像到相应目录 mkdir /yumiso #创建目录mount -t iso9660 /dev/cdrom/sr0 /yumiso #挂载镜像文件到对应目录 3.备份旧的 ...

  5. linux的一页是多大

    命令 getconf PAGESIZE 结果为4096,即一页=4096字节=4KB(注意是Byte,1B=8bit) 在使用mmap映射函数时,它的实际映射单位也是以页为单位的,即不过我们把MAP_ ...

  6. HDU 2222 Keywords Search AC自己主动机入门题

    单词统计的题目,给出一些单词,统计有多少单词在一个文本中出现,最经典的入门题了. AC自己主动机的基础: 1 Trie. 以这个数据结构为基础的,只是添加一个fail指针和构造fail的函数 2 KM ...

  7. &lt;转&gt;Openstack ceilometer 宿主机监控模块扩展

    <Openstack ceilometer监控项扩展>( http://eccp.csdb.cn/blog/?p=352 )主要介绍了对虚拟机监控项扩展, 比較简单.怎样在ceilomet ...

  8. 插入排序、冒泡排序、选择排序、希尔排序、高速排序、归并排序、堆排序和LST基数排序——C++实现

    首先是算法实现文件Sort.h.代码例如以下: <pre name="code" class="java">/* * 实现了八个经常使用的排序算法: ...

  9. emmet教程

    https://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html https://www.zfanw.com/blog/zencoding- ...

  10. 隐藏tomcat nginx版本信息

    Tomcat --首先备份tomcat .首先找到这个jar包,$TOMCAT_HOME/lib/catalina.jar .解压catalina.jar之后按照路径\org\apache\catal ...