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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 实例分析vue循环列表动态数据的处理方法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"

  • vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

    vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

    本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据.分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便.即使是复杂的 Json数组对象,也可以使用 多层嵌套的 v-for 实现,格式如下: <div v-for="(item,index) in items"> <div v-for="(list,index) in item.lists&quo

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

  • vue 列表页跳转详情页获取id以及详情页通过id获取数据

    1.先在router.js中配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', component:movieDetail } 2.获取详情页的id,并派发父组件事件(movieList.vue)页面 <li v-for="(item,index) in movies" :key="index" @click="selectItem(item)"> ....... &l

  • 使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    使用vue框架 Ajax获取数据列表并用BootStrap显示出来

    最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写 1.第一步肯定是包的导入了 目前对node.js还不是很了解,所以包都是手动下载导入的,没有用到那个nmp vue.min.js是vue的主包,vue-resource.js是开源的vue Ajax包,对ajax进行了封装 bootstrap既就是样式的相关css和js了 <script type="text/javascript" src="

  • vue动态删除从数据库倒入列表的某一条方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style type=&q

  • vue input输入框关键字筛选检索列表数据展示

    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo --> <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list

  • vue实现前台列表数据过滤搜索、分页效果

    vue实现前台列表数据过滤搜索、分页效果

    本文实例为大家分享了vue实现列表数据过滤搜索.分页效果的具体代码,供大家参考,具体内容如下 job.vue页面 <style lang="scss"> .job-wrapper { padding-top: 50px; } .job-left { float: left; margin-right: 20px; padding: 20px; width: 310px; background: #fff; } .job-serach-title { margin: 8px

  • 使用vue根据状态添加列表数据和删除列表数据的实例

    如下所示: <template> <div> <div v-for="obj of a" @click="sel(obj)"> {{obj.name}} <span v-if="!obj.select">+</span><span v-else>-</span> </div> <hr> <div> <div v-for=&

  • Vue如何获取数据列表展示

    Vue如何获取数据列表展示

    这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据,并且以列表形式将它们展示了出来.你可以轻松地切换 master 和 dev 分支. 一.展示 二.源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

  • 微信小程序开发（一）：服务器获取数据列表渲染操作示例

    本文实例讲述了微信小程序服务器获取数据列表渲染操作.分享给大家供大家参考,具体如下: 在实际项目开发中,有很多时候,前台页面的数据需要后台服务器传递过来.而前台需要循环铺值,类似如下页面: 请求后台数据: wx.request({ url: getApp().globalData.httpUrl + '/sys/group/selectGroupProList', //请求后台地址 data: { //请求后台的分页数据 pageNum: that.data.page, pageSize: th

  • MyBatisPlus利用Service实现获取数据列表

    目录 1. 简单介绍 2. 接口说明 3. 参数说明 4. 实例代码 4.1 不带任何参数的 list() 方法查询数据 4.2 查询用户ID大于 10,小于 20 且性别为“男”的用户列表 4.3 注意事项说明 1. 简单介绍 嗨,大家好,今天给想给大家分享一下关于Mybatis-plus 的 Service 层的一些方法的使用.今天没有总结,因为都是一些API没有什么可以总结的,直接看着调用就可以了. 下面介绍怎样使用 IServer 提供的 list 方法查询多条数据,这些方法将根据查询条

  • Android RecyclerView实现数据列表展示效果

    Android RecyclerView实现数据列表展示效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 1.首先导入依赖: compile 'com.android.support:recyclerview-v7:25.3.1' 2.适配器类: public class NewsAdapter extends RecyclerView.Adapter { private View view; private Context mcontext; private ArrayList<NewsData.DataBean

  • Vue动态获取数据后控件不可编辑问题

    Vue动态获取数据后控件不可编辑问题

    目录 功能介绍 实现过程 1.做判断 2.在控件中使用editNotavailable 3.定义editNotavailable的初始状态 老规矩:先走波流程! 看实现效果,更好根据大家的问题相对应的解决自己的问题. 功能介绍 由动图可以看到,当我点击添加试题时,因为要添加些数据,跳转过去的界面必须是可以使用的.再当我点击编辑,携带过去的数据是不能更改的,只更改下方题干部分. 具体如何实现控件获得数据后不可更改呢?主要是用到判断,可以看到这里我只给input和select组件设置了不可用,但他们

  • Vuex实现计数器以及列表展示效果

    本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法. 本案例github 从安装到启动初始页面的过程都直接跳过.注意安装时选择需要路由. 首先,src目录下新建store目录及相应文件,结构如下: index.js文件内容: import Vue from "vue" import Vuex from 'vuex' Vue.use(Vuex); //务必在new Vuex.Store之前use一下 export default new Vuex.Store({ state:{

  • vue渲染大量数据时卡顿卡死解决方法

    vue渲染大量数据时卡顿卡死解决方法

    目录 1. 问题描述 2. 常见的解决方案 3. 解决方案流程图 4. 代码 1. 问题描述 由于业务需求,需要在一个页面中点击查询按钮时加载出所有的数据,但数据量有近10万条,渲染出现卡顿,页面卡死. 2. 常见的解决方案 - 自定义中间层 自定义nodejs中间层,获取并拆分这10w条数据, 前端对接nodejs中间层,而不是服务器 缺点:成本高 - 虚拟列表 只渲染可视区域DOM,其他隐藏区域不显示,只用div撑起高度,随着浏览器滚动,创建和销毁DOM. 虚拟列表实现起来非常复杂,可借用第

  • vue如何从后台获取数据生成动态菜单列表

    vue如何从后台获取数据生成动态菜单列表

    目录 1.数据准备 2.选择组件 3.配置路由 4.不出问题这样就可以实现动态路由了 5.完整代码 1.数据准备 树形菜单基本数据很简单,只需要菜单id,菜单名称,路由地址,图标.下图中的节点id和父节点id是为了后端生成树形数据,只负责前端的话只需要拿到前面说的四个数据就行. 后端将数据转成树形结构,传给前端的数据结构如图 2.选择组件 我直接用element-ui的el-menu组件,结构是(这是用来注释的,完整代码在后面) <el-menu> <template v-for=&qu

随机推荐