vue3.x fetch 使用

Z时代
2024-01-10
分类：综合

vue

App.vue

<template>
    <div id="app">
        <Example></Example>
    </div>
</template>
<script>
    import Example from './components/Example'
    export default {
        name: 'App',
        components:{
            Example
        }
    }
</script>
<style scoped>
</style>

Example.vue

<template>
    <div id="example">
        <button @click="getData">获取数据</button>
        <ul>
            <li v-for="data in dataList" :key="data.id">
                <h3>{{data.login}}</h3>
                <img :src="data.avatar_url" />
            </li>
        </ul>
    </div>
</template>
<script>
    //import axios from 'axios';
    export default {
        name: "Example",
        data:function(){
            return {
                dataList:[]
            }
        },
        methods:{
            getData:function () {
fetch('https://api.github.com/users').then(res=>{
                    return res.json();
                }).then(res=>{
                    this.dataList = res;
                })
            }
        }
    };
</script>
<style scoped>
    #example{
        text-align: center;
    }
    #example p{
        text-align: center;
        color:#fff;
        background-color: #0c63e4;
    }
    #example ul {
        list-style: none;
    }
    #example ul li {
        width: 50%;
        margin: 0 auto;
        background-color: #ccc;
    }
    #example li img{
        width:100px;
        height: 100px;
    }
</style>