Vue实战:获取数据列表展示

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/b954960630/article/details/87917139

这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据,并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。


一、展示

在这里插入图片描述

二、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>title</h2>
        <template v-for="(branch, index) in branches">
            <input type="radio" 
                :id=index 
                :value="branch" 
                v-model="currentBranch"
            />
            <label :for="index">{{ branch }}</label>
        </template>
        <div>当前选定:{{ currentBranch }}</div>
        <ul>
            <li v-for="item in getData">
                <a :href="item.html_url">{{ item.sha.slice(0, 7) }}</a>
                - <span>{{ item.commit.message }}</span><br/>
                <span>创建人:<a :href="item.author.html_url"> {{ item.commit.author.name }}</a></span><br/>
                <span>创建时间:{{ item.commit.author.date | formatDate }}</span>
            </li>
        </ul>
    </div>

    <script>
        let apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha='
        let vm = new Vue({
            el: '#app',
            data() {
                return ({
                    branches: ['master', 'dev'],
                    currentBranch: 'master',
                    getData: null,            
                });
            },
            created() {
                this.fetchDate();
            },
            watch: {
                currentBranch: 'fetchDate'
            },
            filters: {
                formatDate(v) {
                    return v.replace(/T|Z/g, ' ');
                }
            },
            methods: {
                fetchDate() {
                    var xhr;
                    if(window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                    }else {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    let self = this;
                    
                    xhr.onload = function() {
                        if(xhr.readyState == 4) {
                            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                                self.getData = JSON.parse(xhr.responseText);
                            }else {
                                console.error(xhr.status, xhr.statusText);
                            }
                        }
                    }
                    xhr.open('GET', apiURL + this.currentBranch);
                    xhr.send(null);
                }
            },
        });
    </script>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页