<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

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

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

    <script>

        window.onload=function(){

            var url='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su';

            new Vue({

                el:'body',

                data:{

                    Data:[],

                    tl:''

                },

                methods:{

                    get:function(){

                        this.$http.jsonp(url,{

                            wd:this.tl

                        },{

                            jsonp:"cb"

                        }).then(function(res){

                            console.log(res.data.s);

                            this.Data=res.data.s;

                        },function(){

                        });

                    }

                }

            })

        }

    </script>

</head>

<body>

    <div id="box">

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

        <ul>

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

                {{value}}

            </li>

        </ul>

        <p v-show="Data.lengh==0">暂无内容……</p>

    </div>

</body>

</html>

用vue实现百度搜索功能的更多相关文章

  1. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  2. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  3. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  4. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  5. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  6. vue-resource使用 (vue仿百度搜索)

    1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

  7. vue自动完成搜索功能的数据请求处理

    在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...

  8. vue实现百度搜索下拉提示功能

    这段代码用到vuejs和vue-resouece.实现对接智能提示接口,并通过上下键选择提示项,按enter进行搜索 <!DOCTYPE html> <html lang=" ...

  9. 使用vue实现自定义搜索功能

    实现效果如:http://www.ligerui.com/demos/filter/filter.htm 代码: <%@ Page Language="C#" AutoEve ...

随机推荐

  1. 项目总结--基于Cortex-A9平台的米兰花智能培育系统

    基于Cortex-A9平台的米兰花智能培育系统 1. 系统功能概述 本系统主要实现了模拟米兰花智能培育的过程.通过前端传感器采集相关环境因子数据经ZigBee组网发送到协调器汇总,网关通过串口读取协调 ...

  2. Tachyon：Spark生态系统中的分布式内存文件系统

    转自: http://www.csdn.net/article/2015-06-25/2825056  摘要:Tachyon把内存存储的功能从Spark中分离出来, 使Spark可以更专注计算的本身, ...

  3. Docker-Compose 一键部署Ningx+.Net Core+Redis集群

    在看该文章前,你需要对Docker有所了解. 1.创建WebApp应用程序 我使用的是.Net Core 1.0.1版本,创建一个MVC应用程序,并添加对Redis的引用.因为这些很基础,也很简单,这 ...

  4. LA 5713 秦始皇修路

    https://vjudge.net/problem/UVALive-5713 题意: 秦朝有n个城市,需要修建一些道路使得任意两个城市之间都可以连通.道士徐福声称他可以用法术修路,不花钱,也不用劳动 ...

  5. JAVA初学者（一）

    2015-12-15 21:26:17 刚学的java  做个总结: 1.构造函数没有返回值. 2.A对象调用Q的方法,Q方法里的变量就是A的变量 Fraction add(Fraction f) 在 ...

  6. Codeforces Round #279 (Div. 2) B. Queue

    B. Queue time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  7. Memcached CAS 命令

    Memcached CAS(Check-And-Set 或 Compare-And-Swap) 命令用于执行一个"检查并设置"的操作 它仅在当前客户端最后一次取值后,该key 对应 ...

  8. js的一些编码问题

    1 eval()的使用; 未声明变量的使用: 遗漏的分号; 不恰当的换行; 错误的逗号使用; 语句周围遗漏的括号; switch分支语名中遗漏的break; 重复声明的变量; with的使用; 错误使 ...

  9. 第四章 SSL和Proxy高级选项

    在前一章,我们已经学习了HTTP消息如何通过Burp Proxy进行拦截和处理,本章我们将继续学习HTTPS协议消息的拦截和处理. HTTPS协议是为了数据传输安全的需要,在HTTP原有的基础上,加入 ...

  10. Gruntjs提高生产力（四）

    思考: 1.grunt以工程为单位安装插件? 如果有新工程就要重新安装插件或者把安装好的插件拷贝过去.这样很麻烦,解决方案是需要用grunt的项目统一放在grunt项目中. 2.每次需要针对项目编写g ...