vue 请求接口获取数据

vue请求接口获取数据1.链接:https://www.cnblogs.com/kymming/p/6484626.html<!doctype html><html><head><meta charset="UTF-8"><title>获取图片列表</title><meta name="viewport" content

啊了个呜

6832人浏览 · 2020-12-01 16:52:02

啊了个呜 · 2020-12-01 16:52:02 发布

vue 请求接口获取数据

1.链接:https://www.cnblogs.com/kymming/p/6484626.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取图片列表</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />       
    </head>
    <body>
        <div id="app">
            <ul>
                <li>
                    <img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>
                </li>
            </ul>
        </div>       
    </body>
    <script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var demo=new Vue({
            el:'#app',
            data: {
                imgList:[],
                getImgUrl: ''    //存数据接口               
            },
            created: function(){
                this.getImg()              //定义方法
            },
            methods: {
                getImg: function(){
                    var that = this;      
                    that.$http({           //调用接口
                        method:'GET',
                        url:this.getImgUrl  //this指data
                    }).then(function(response){  //接口返回数据
                        this.imgList=response.data;                        
                    },function(error){
                    })
                }
            }
        })
    </script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^