Vue如何获取数据列表展示


Posted in Javascript onDecember 11, 2019

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

一、展示

Vue如何获取数据列表展示

二、源码

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
理解JS绑定事件
Jan 19 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
vue el-table实现行内编辑功能
Dec 11 #Javascript
Vue.js实现可编辑的表格
Dec 11 #Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 #Javascript
用JS实现一个简单的打砖块游戏
Dec 11 #Javascript
js消除图片小游戏代码
Dec 11 #Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 #Javascript
基于jQuery实现可编辑的表格
Dec 11 #jQuery
You might like
php与java通过socket通信的实现代码
2013/10/21 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python如何读取MySQL数据库表数据
2017/03/11 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
北京英文导游词
2015/02/12 职场文书
感恩节寄语2015
2015/03/24 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
SQL之各种join小结详细讲解
2021/08/04 MySQL
Spring Boot 实现 WebSocket
2022/04/30 Java/Android