文档章节

Vue-百度下拉列表

1527
 1527
发布于 2017/09/04 23:31
字数 176
阅读 19
收藏 0
点赞 0
评论 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue百度下拉列表</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>



















 

© 著作权归作者所有

共有 人打赏支持
1527
粉丝 5
博文 86
码字总数 28850
作品 0
成都
程序员
Vue调试神器vue-devtools安装

前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。 chrome商店直接安装 vue-devtools可以从chr...

kisshua
前天
0
0
全网首发mpvue课程小程序全栈开发视频课程 小程序实战教程 完整版

第1章 课程简介 本章节介绍了课程概述,教学方式 ,还有小程序项目的演示。 第2章 原生小程序 对原生小程序做一个入门的介绍,包括小程序帐号申请和开发工具安装和使用,小程序目录文件的讲解...

qq5b46e049de5e3
07/12
0
0
Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁
04/16
0
0
前端框架之Vue.js 库的使用

vue.js简介 Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。 Vue.js可以作为一个js库来使用,也可以用...

玄学酱
06/22
0
0
mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿
05/18
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
2017/04/20
0
0
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴

近日,重构项目某一老模块时,有一个功能是生成二维码并下载,还可以复制链接。列表每项都有二维码、下载二维码和复制链接和列表上方总的二维码。 老模块是用的qrocode中文文档,qrcode gith...

轩辕Rowboat
05/15
0
0
web前端Vue.js经典开源项目汇总

  Vue是什么?   Vue.js(读音/vju/,类似于view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易...

爱前端
2017/12/03
0
0
【vue/axios/vue-router】制作一个精致的美团项目

一、项目展示: 注意:如果gif动态图看不了,麻烦大家点击github美团项目中mt-app/src/assets/美团.gif便可以观看! 如果大家需要项目源码,请到我的GitHub上下载即可。 二、项目涉及到技术栈...

浪里行舟
05/17
0
0
Vue2.0笔记——Ajax,JSONP跨域

Ajax实现 vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行...

逝岁月
04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java示例演示Functor 和monad

This article was initially an appendix in our Reactive Programming with RxJavabook. However introduction to monads, albeit very much related to reactive programming, didn't suit......

Quan全
13分钟前
0
0
微信官方jssdk Demo

1.html部分 <!DOCTYPE html><!-- saved from url=(0028){sh:$selfUrl} --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"......

koloor
17分钟前
0
0
数据库命名规范

https://www.cnblogs.com/pangguoming/p/7126512.html 摘要:当前研发工作中经常出现因数据库表、数据库表字段格式不规则而影响开发进度的问题,在后续开发使用原来数据库表时,也会因为数据...

塔塔米
17分钟前
0
0
java https 请求工具类-通用

package com.ra.common.util; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintW......

轻量级赤影
18分钟前
0
0
MFC界面套包BCG Pro Edition for MFC正式发布v27.3|附下载

BCGControlBar Professional Edition for MFC是MFC的一个扩展库,您可以用来构建类似于Microsoft Office 2000/XP/2003/2007/2010/2013 和 Microsoft Visual Studio-like(打印、用户定制工具......

Miss_Hello_World
18分钟前
0
0
Spring Cloud云服务 - HongHu架构common-service 项目构建过程

上一篇我们介绍了《整合spring cloud云服务架构 - HongHu云架构common-service代码结构分析》,本节我们将对common-service整个项目进行剖析,将整个构建的流程给记录下来,让更多的关注者来...

itcloud
18分钟前
0
0
Connection reset

在使用HttpClient调用后台resetful服务时,“Connection reset”是一个比较常见的问题,有同学跟我私信说被这个问题困扰很久了,今天就来分析下,希望能帮到大家。例如我们线上的网关日志就会...

夜黑人模糊灬
23分钟前
0
0
如何写PHP规范注释

所有的文档标记都是在每一行的 * 后面以@开头。如果在一段话的中间出来@的标记,这个标记将会被当做普通内容而被忽略掉。 @access 该标记用于指明关键字的存取权限:private、public或prote...

度_
23分钟前
0
0
influxDB Ppostgis

PostGis 1.需要安装postgreSQL,postgis作为插件嵌入到postgreSQL中; 2.使用zip包直接安装,需要修改 makepostgisdb_using_extensions.bat文件中的路径,用户名,密码,然后直接运行; 3.没有...

courtzjl
27分钟前
0
0
多线程Thread-多线程顺序执行

需求:现在有两个任务,任务1和任务2,任务1中有多个线程,并且任务2必须等任务1完成后才能执行。 namespace TThread{ class Program { static void Main(string[] ar...

kaixinguo314
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部