Vue如何获取数据列表展示_vue2中表格内一行一列中同时存放显示标题图片ID等信息,怎么实现资源-CSDN文库

79 浏览量 2020-12-13 12:01:44 上传评论收藏 43KB PDF 举报

资源推荐

资源详情

资源评论

Vue如何获取数据列表展示如何获取数据列表展示

这个例子从 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" rel="external nofollow" >{{ 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'

},

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38703968

粉丝: 7
资源: 936

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip