【04】vue.js — 百度搜索数据案例_vue 抓取百度关键词-CSDN博客

本文链接：https://blog.csdn.net/qq_32629809/article/details/77865994

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-resource.js" ></script>
        <style>
            .gray {
                background-color: gray;
            }
        </style>
        <script>
            window.onload = function(){
                new Vue({
                    el: '#box',
                    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;
                            if(this.myData.length == 0) return;
                            this.t1=this.myData[this.now];
                        },
                        changeUp: function(){
                            this.now--;
                            if(this.now==-2)this.now=this.myData.length-1;
                            if(this.myData.length == 0) return;
                            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>

获取百度下拉搜索数据