1、前边说到ajax请求的发送，今天要实现的是页面加载完成之后，渲染出列表的数据

2、首先新建一个GoodsList.vue ,加入一下HTML内容

<template>
  <div class="hello">
    <h1>{{title}}</h1>
    <ul>
      <li v-for="(v,k) in goodsList" :key="k">
        <div style="border:1px solid red;margin-top:2px">
          <span>商品ID:{{v.goods_id}}</span><br/>
          <span>商品名字：{{v.goods_name}}</span>
        </div>
      </li>
    </ul>
    <button></button>
  </div>
</template>

3、在js代码中添加以下内容

<script>
export default {
  name: 'demo',
  data () {
    return {
      title: 'GoodsList',
      goodsList:[]
    }
  },
  methods: {

  },
  mounted() {
    this.$http.post('/api/getProductList', {}).then((response) => {
      console.log(response)
      this.goodsList = response.body.data.data
    }, (error) => {
      console.log(error)
    })
  }
}
</script>

1. 首先需要声明一个goodslist的变量，并且初始化为空
2. 添加mounted方法，在页面加载完成之后，会自动触发改方法
3. 页面加载完成之后，自动发送post请求获取到数据
4. 请求到数据之后，把数据放在data变量中，页面自动渲染出对应的数据

4、加载下一页

在HTML代码下添加以下内容

<template>
  <button v-if="has_more" @click="loadMore()">点击加载更多</button>
  <button v-else>我也是有底线的。。。</button>
</template>

修改JS代码

1. 添加has_more变量，用来控制按钮的显示，有下一页的话显示 “点击加载更多” 按钮
2. 如果数据不够10条，则修改 has_more属性为false，则对应按钮自动显示为 “我也是有底线的。。。”
3. 把加载数据的方法抽象为一个公共方法，点击加载下一页的时候，直接调用getGoodsList

<script>
export default {
  name: 'demo',
  data () {
    return {
      title: 'GoodsList',
      goodsList: [],
      page: 1,
      has_more: true
    }
  },
  methods: {
    loadMore: function () {
      this.getGoodsList( this.page)
    },
    getGoodsList: function ( page ) {
      this.$http.post('/api/getProductList', {page: this.page }).then((response) => {
        this.goodsList = this.goodsList.concat(response.body.data.data)
        this.page ++
        if(response.body.data.data.length < 10 ){
          this.has_more = false;
        }
      }, (error) => {
        console.log(error)
      })
    }
  },
  mounted() {
    this.getGoodsList(1);
  }
}
</script>