利用vue-resource模拟百度下拉列表

最近还在vue的路上匍匐前进,这个是昨天晚上看智能社的视频学习做的一个小小的demo.

百度下拉列表

先上图:

利用的是jsonp来获取的数据:

这部分代码如下:

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:this.t1
},
jsonp:'cb'
}
).then(response => {
console.log(response.body.s);
this.showData = response.body.s;
},response =>{
console.log('出错啦啦啦!')
})

加写了个键盘上下事件.

最后的效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>  
        .gray{  
            background: gray;  
        }  
    </style>  
    </head>
    <body>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
        <div id='app'>
            <input type="text" @keyup="getData($event)" v-model="t1" @keyup.up.prevent="changeUp()" @keydown.down="changeDown()">
            <ul>
                <li v-for="(value,index) in showData" :class="{gray:index==now}">
                    {{value}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    t1:'',
                    showData:[],
                    now:-1
                },
                created(){
                    this.getData();
                },
                methods:{
                    getData:function(ev){
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            params:{
                                wd:this.t1
                            },
                            jsonp:'cb'
                        }
                        ).then(response => {
                            console.log(response.body.s);
                            this.showData = response.body.s;
                        },response =>{
                            console.log('出错啦啦啦!')
                        })
                    },
                    changeDown:function(){
                        this.now++;
                        if(this.now == this.showData.length){
                            this.now = -1;
                        }
                        this.t1 = this.showData[this.now];
                    },
                    changeUp:function(){
                    this.now--;
                    if(this.now == -2){
                        this.now = this.showData.length-1;
                    }
                    this.t1=this.showData[this.now];
                }
                },
            })
        </script>
    </body>
</html>

每天学习一点点,进步一点点。

posted @ 2018-06-13 17:42  zy1314  阅读(173)  评论(0编辑  收藏  举报