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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍如何获取MySQL表列的数据类型？，包括了如何获取MySQL表列的数据类型？的使用技巧和注意事项，需要的朋友参考一下 您可以在“ information_schema.columns”的帮助下获取MySQL表列数据类型。 语法如下- 要了解上述语法，让我们首先创建一个表- 应用以上语法获取MySQL列数据类型。查询如下- 以下是输出- 如果需要，请在数据类型之前的输出中也包括列名称。
-
问题内容： 我需要查看c＃程序使用的Access数据库中是否存在表。已知有用于其他数据库的SQL命令将返回表列表。Access / Jet数据库是否有这样的命令？ 问题答案： 尝试GetSchema（）
-
如何将spark数据框中的所有列名放入Seq变量中。 输入数据 我需要使用scala编程将所有列名存储在变量中。我尝试了如下方法，但不起作用。 预期输出：
-
我的数据帧像这样： 我得到了概率栏 结果是: 但是我想获取每行的第一列数据，如下所示： 如何做到这一点？ 输入为标准随机林输入，输入上方为＜code＞val数据＝预测。选择（“文档ID”，“概率”） root|--docID： string（nullable=true）|--标签：双（nullable=false）|--特征：向量（nullable=true）|--indexedLabel：双（n
-
基本信息 Path： /api/interface/list Method： GET 接口描述： 请求参数 Headers 参数名称 参数值 是否必须 示例 备注 Content-Type application/json 是 Query 参数名称 是否必须 示例 备注 project_id 是 token 是 page 是 1 当前页数 limit 是 10 每页数量，默认为10，如果不想要分页
-
问题内容： 我正在基于CodeIgniter的应用程序。这里的代码： 控制器 ： 型号 ： 查看 ： Javascript ： 上面的代码运行良好。 现在，我想通过ajax请求将数据提取到。我已经从url创建了一个ajax请求，可以从这里，where 和进行说。 Ajax响应产生： 问题 如何使用Ajax数据源配置数据表，以及如何将数据显示到表中，所以我可以使用数据例如创建类似代码的链接 问题答案