Vue如何获取数据列表展示
更新时间：2019年12月11日 15:27:42 作者：我叫白天宇
这篇文章主要为大家详细介绍了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'
},
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue draggable resizable gorkys与v-chart使用与总结
这篇文章主要介绍了vue draggable resizable gorkys与v-chart使用与总结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
elementUI中input回车触发页面刷新问题与解决方法
这篇文章主要给大家介绍了关于elementUI中input回车触发页面刷新问题与解决方法,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了在vue中axios设置timeout超时的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要给大家介绍了关于vue内点击url下载文件的最佳解决方案,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
本文主要介绍了vue全局挂载实现APP全局弹窗的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
今天被vue中proxy配置困扰了一天,记录一下,下面这篇文章主要给大家介绍了关于Vue配置文件中的proxy配置方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
在vue3+vite创建的项目中使用vuex，要注意的是vite有部分写法和之前的webpack是不同的，这篇文章主要介绍了vue3+vite中使用vuex的具体步骤,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
收集表单数据可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用，这篇文章主要介绍了vue的表单数据收集，基本指令和自定义指令,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了详解vue-router 初始化时做了什么,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论