<!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. MR案例：WordCount改写

    请参照wordcount实现一个自己的MapReduce,需求为:     a. 输入文件格式:        xxx,xxx,xxx,xxx,xxx,xxx,xxx     b. 输出文件格式:   ...

  2. 内核启动时在挂载ubi文件系统时提示UBIFS error (ubi0:0 pid 1): ubifs_read_superblock: min. I/O unit mismatch

    一.背景 1.1 笔者机器的内核错误信息如下: UBIFS error (ubi0:0 pid 1): ubifs_read_superblock: min. I/O unit mismatch: 2 ...

  3. linux下安装sphinx

    1.下载sphinx源码包 上面截图的这个网址   复制链接地址   在putty终端使用:wget http://sphinxsearch.com/files/sphinx-2.3.1-beta.t ...

  4. AngularJS Injector和Service的工作机制

    要了解angularJS里的injector和Service是如何工作的,需要阅读/src/auto/injector.js.另外要结合/src/loader.js才能明白它的应用场景. auto/i ...

  5. Number.MIN_VALUE常量说明

    Number.MIN_VALUE常量说明 Number.MIN_VALUE表示的最小值为5e-324 MIN_VALUE代表的并不是负最小,而是最接近0的一个数 负最小值可以使用-Number.MAX ...

  6. kotlin for android----------MVP模式下（OKHttp和 Retrofit+RxJava）网络请求的两种实现方式

    今天要说的干货是:以Kotlin,在MVP模式下(OKHttp和 Retrofit+RxJava)网络请求两种实现方式的一个小案例,希望对大家有所帮助,效果图: Retrofit是Square公司开发 ...

  7. 已知起始点，获取每段等距离途经点的经纬度（用百度js api作）

    已知两个中文地址,自动规划路径,获取路径上每个3公里的点的经纬度 <html> <head> <meta http-equiv="Content-Type&qu ...

  8. Linux命令详解-date

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便. 1．命令格式:   date [ ...

  9. 使用python编写微信跳一跳的自动脚本

    实现思路: 调用adb命令,截图 寻找小小人的底部中心点role(从下到上扫描,直到找到小小人相同像素的点,至于小小人像素点rgb是什么,可以使用photoshop查看) 寻找棋盘最高点top,然后寻 ...

  10. flask学习(十一)：if判断语句

    1. 语法: {% if xxx %} {% else %} {% endif %} 2. if的使用,和python中if相差无几 用if判断,当用户名存在且年龄大于18时,才显示用户名和注销