用vue实现百度搜索功能 

<!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>

 

posted @ 2017-07-25 09:53  Viva_nan  阅读(1084)  评论(0)    收藏  举报