Vue（九）小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <style>
        .current{
            background-color:#ccc;
        }
    </style>
    <script src="https://unpkg.com/vue"></script>
    <script src="vue-resource/vue-resource.min.js"></script>
    <script>

        window.onload=function(){
            let app = new Vue({
                el:'.container',
                data:{
                    keyWord:'',
                    myData:{},
                    nowIndex:-1 //当前选中项的索引
                },
                methods:{ 
                    getData(e){
                        //如果按方向上下键，则不发送请求
                        if(e.keyCode==38||e.keyCode==40)
                        return;
                        
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            params:{
                                wd:this.keyWord
                            },
                            jsonp:'cb' //百度使用的jsonp的参数名为 cb 
                        }).then(response => {
                            console.log(response.body.s);
                            this.myData=response.body.s; //把数据存起来
                        },response => {
                            console.log('发送失败');
                        })
                    },
                    changeDown(){
                        this.nowIndex==this.myData.length-1?this.nowIndex = -1:this.nowIndex++;
                        this.keyWord=this.myData[this.nowIndex];
                        console.log(this.nowIndex,this.myData.length);
                    },
                    changeUp(){
                        this.nowIndex < 0?this.nowIndex = this.myData.length-1:this.nowIndex--;
                        this.keyWord=this.myData[this.nowIndex];
                        console.log(this.nowIndex,this.myData.length);
                    }
                }
            })
        }

    </script>

</head>

<body>

<div class="container">
    <input type="text" v-model="keyWord" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp">
    <!-- 把数据存起来展示 -->
    <ul>
        <li v-for="(value,index) in myData" :class="{current:index==nowIndex}">
            {{value}}
        </li>
    </ul>
    <p v-show="myData.length == 0">暂无数据</p>
</div>

</body>

</html>
效果：