<!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. 求CRC16校验

    unsigned short DialogSerial::crc_ccitt(unsigned char *q,int len){ unsigned short ccitt_table[256] = ...

  2. Spring Boot 中yml配置文件

    步骤一:yml格式 现在大家发现,在springboot里还是要用到配置文件的. 除了使用.properties外,springboot还支持 yml格式. 个人觉得yml格式的可读性和..prope ...

  3. Vue中使用百度地图——根据输入框输入的内容，获取详细地址

    知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn. ...

  4. mybatis动态sql中的sql标签——抽取可重用的sql片段

    1.用<sql>标签抽取可重用的sql片段 <!-- 抽取可重用的SQL片段,方便后面引用           1.sql抽取,经常将要查询的列名,或者插入用的列名,之后方便引用   ...

  5. 【ACM】求高精度幂

    题目来源:http://poj.org/problem?id=1001&lang=zh-CN 求高精度幂 Time Limit: 500MS   Memory Limit: 10000K To ...

  6. eclipse隐藏关闭的工程

    打开上面这个视图

  7. 解题报告：hdu1248寒冰王座 - 完全背包模板

    2017-09-03 16:16:38 writer:pprp 完全背包问题:从左向右进行扫描,用一维阵列进行分析 代码如下: /* @theme:hdu1248 寒冰王座 @writer:pprp ...

  8. 关于ckeditor 之 上传功能

    度了很多文章,看了很多关于ckeditor配置上传功能的文章,没一个写得清楚的, 就是简单的根目录下.config.js 增加 config.filebrowserUploadUrl="/a ...

  9. CA证书，https讲解

    关于具体连接过程,https://blog.csdn.net/wangjun5159/article/details/51510594 这篇博客写的应该比较准确. 我的理解,其中关键的一点是 http ...

  10. 为什么我们选择parquet

    说明:此方案已经我们已经运行1年. 1.场景描述: 我们对客户登录日志做了数据仓库,但实际业务使用中有一些个共同点, A  需要关联维度表 B  最终仅取某个产品一段时间内的数据 C 只关注其中极少的 ...