2020-11-12无题

点击根据下标渲染数据

这里是选项

首先在data里面定义

  newlist: ["全部", "精华", "分享", "问答", "招聘", "客户端测试"],
  list: [],  //原数据
   upData: []  //新数据

在html中使用v-for循环出来

<ul>
          <li v-for="(item, index) in newlist" :key="index" @click="gain(index)">{{ item }}</li> 
</ul>

然后获取json数据

  mounted() { 
    this.$axios.get("/list.json").then(res => {
      this.list = res.data.data;
      this.upData = this.list.splice(1, 8);
    });
  },

这里是渲染内容

<ul>
		<li v-for="(item, index) in upData" :key="index">
		<div class="flex">
                <div class="img_style">
                  <img :src="item.author.avatar_url" alt />
                </div>
                <div>
                  <p>{{ item.title }}</p>
                  <p>{{ item.last_reply_at }}</p>
                </div>
              </div>
		</li>
</ul>

这里是操作方法

 gain(index) {
      this.$axios.get("/list.json").then(res => {
        this.list = res.data.data;
      });
      if (index == 0) {
        this.upData = this.list.splice(1, 8);
      }
      if (index == 1) {
        this.upData = this.list.splice(8, 15);
      }
      if (index == 2) {
        this.upData = this.list.splice(3, 10);
      }
      if (index == 3) {
        this.upData = this.list.splice(11, 20);
      }
      if (index == 4) {
        this.upData = this.list.splice(6, 13);
      }
      if (index == 5) {
        this.upData = this.list.splice(14, 19);
      }
    }