这个例子从Github的API中获取了最新的Vue。js提交数据,并且以列表形式将它们展示了出来。你可以轻松地切换主人和dev分支。
<强>一、展示
<强>二,源码
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> Document
& lt;脚本src=" https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js”祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; h3> title
& lt;模板v=?分支、索引)的分支比;
& lt;输入类型=肮悴ァ?
:id=指数
:value=" https://www.yisu.com/zixun/branch "
v模型=" currentBranch "/比;
& lt;标签:="指数"在{{分支}}& lt;/label>
& lt;/template>
& lt; div>当前选定:{{currentBranch}} & lt;/div>
& lt; ul>
& lt;李v=癵etData项目”在
& lt;: href=" https://www.yisu.com/zixun/item.html_url " rel=巴獠縩ofollow”在{{item.sha。片(0,7)}}& lt;/a>
- & lt; span> {{item.commit.message}} & lt;/span> & lt; br/比;
& lt; span>创建人:& lt;答:href=" https://www.yisu.com/zixun/item.author.html_url "比;{{item.commit.author.name}} & lt;/a> & lt;/span> & lt; br/比;
& lt; span>创建时间:{{item.commit.author.date | formatDate}} & lt;/span>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; script>
让apiURL=' https://api.github.com/repos/vuejs/vue/commits& # 63; per_page=3,沙='
让vm=new Vue ({
埃尔:“#应用”,
数据(){
返回({
分支:“大师”、“开发”,
currentBranch:“大师”,
getData:空,
});
}，
创建(){
this.fetchDate ();
}，
看:{
currentBranch:“fetchDate”
}，
过滤器:{
formatDate (v) {
返回v。取代(Z/g/T | ' ');
}
}，
方法:{
fetchDate () {
var xhr;
如果(window.XMLHttpRequest) {
xhr=new XMLHttpRequest ();
其他}{
xhr=new ActiveXObject (“Microsoft.XMLHTTP”);
}
让自我=;
xhr。onload=function () {
如果(xhr。readyState==4) {
如果(xhr。状态在=200,,xhr。状态& lt;300 | | xhr。状态==304){
自我。getData=https://www.yisu.com/zixun/JSON.parse (xhr.responseText);
其他}{
console.error (xhr。地位,xhr.statusText);
}
}
}
xhr。打开(‘得到’,apiURL + this.currentBranch);
xhr.send(空);
}
}，
});
& lt;/script>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
