【基础】发送请求（实例：通过百度接口jsonp请求下拉列表）

发送请求（实例：通过百度接口jsonp请求下拉列表）

• css

<style>
    .gray_bg {
        background: #cccccc;
    }
</style>

• html

<div id="app">
    <input type="text" v-model="textDefault" @keyup="vueJsonp()" @keydown="currentLineChange($event)">
    <ul>
        <li v-for="(item,index) in downList" :class="{gray_bg:index == currentLine}">{{item}}</li>
    </ul>
    <p v-show="downList.length == 0">暂无数据</p>
</div>

• js

<script>
    // 初始化数据
    window.onload = function () {
        // vue
        new Vue({
            el: '#app',
            data: {
                textDefault: '', // 文本框默认值内容
                downList: [], // 下拉菜单内容
                currentLine: -1 // 当前行坐标
            },
            methods: {
                vueJsonp: function () {
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
                        params: {
                            wd: this.textDefault
                        },
                        jsonp: 'cb'
                    }).then(function (res) {
                        this.downList = res.body.s;
                    }, function (err) {
                        console.log(err);
                    })
                },
                /**
                 * 更新当前行数
                 */
                currentLineChange: function (event) {
                    if (event.keyCode == 40) {
                        // 当按下“↓”
                        if (this.currentLine <= this.downList.length) {
                            // 如果在结果集长度内 增加行数
                            this.currentLine++;
                        } else {
                            // 如果在结果集长度外 重置变量
                            this.currentLine = this.downList.length;
                        }
                    } else if (event.keyCode == 38) {
                        // 当按下“↑”
                        if (this.currentLine < 0) {
                            // 如果小于0 则取消显示
                            this.currentLine = 0;
                        } else {
                            this.currentLine--;
                        }
                    }

                }
            }
        });
    };
</script>