03-Vue数据请求

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

03-Vue数据请求

Poki-Q   2020-03-20 我要评论

1. vue-resource

  •  vue-resource jsonp请求
    <body>
        <div id="app">
            <!-- 
                v-model 监听表单域,把表单域的值传给它的属性值,
                属性值再传给data里面的数据(且它的属性值必须存在data对象里面)
                其它地方就可以调用由表单域传到data里面的数据了
                .lazy 失去焦点后更新
            -->
            <input type="text" v-model.lazy="good" @keyup.enter="jsonp">
            <button @click="jsonp">http请求</button>
            <p v-for="res in result">{{res[0]}}</p>
        </div>
    
        <script src="./base/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
        <script>
            // 请求的接口
            // http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb
            var vm = new Vue({
                el:"#app",
                data:{
                    good:"",
                    result:[]
                },
                methods:{
                    jsonp(){
                        // jsonp('请求地址',{配置})
                        this.$http.jsonp('http://suggest.taobao.com/sug', {
                            // 携带的参数
                            params:{
                                code:"utf-8",
                                q:this.good
                            }
                        }).then(res => {
                            // res.data 返回的数据
                            this.result = res.data.result
                        })
                    }
                }
            })
    
        </script>
    </body>

     

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们