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 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
javascript元素动态创建实现方法
May 13 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
微信小程序实现购物车小功能
Dec 30 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 中dirname(_file_)讲解
2007/03/18 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
AngularJS入门之动画
2016/07/27 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python optparse模块使用实例
2015/04/09 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
《我不是最弱小的》教学反思
2014/02/23 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2015年重阳节主持词
2015/07/04 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
python标准库ElementTree处理xml
2022/05/20 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript