VUE—点击换一批就更换一批内容

VUE—点击换一批就更换一批内容

<template>
  <div id="home_ui">
    <div class="content" ref="wrapper">
      <div>
        <button @click="change">换一批</button>
        <ul class="list">
          <li v-for="(item, index) in datacontent" :key="index">
            <img v-lazy="item.pic" alt="">
            <h3>{{item.h3}}</h3>
            <p>{{item.page}}</p>
            <p>{{item.recommend}}</p>
            <p>
              <span>{{item.shop}}</span><span>{{item.time}}</span></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

data () {
      return {
        data, // 放了10个对象
        datacontent: [], // 用来存放每次点击换一批出来的三个对象
        num2: '', // 用来放三个随机数
        arr: [] // 用来放三个随机数的数组，用来循环
      }
    },
    mounted () { // 页面一加载的时候先出来三个对象的内容
      for (var i = 0; i < 3; i++) {
        this.datacontent.push(this.data[i])
      }
    },
    methods: {
      change () { //每次点击换一批触发这个方法
        this.num2 =''
        this.arr = []
        this.datacontent = [] // 每次点击换一批就让之前的数据全清空
       while(this.arr.length < 3){ // 用while来判断是否循环三次
          let num = parseInt(Math.random() * 5) // 随机出三个0-9之间的随机数
          if (this.arr.indexOf(num) == -1) { // 获得不重复的三个数
            this.arr.push(num)
            this.num2 = num
            this.datacontent.push(this.data[this.num2]) // 将随机数当作下标来便利data里的内容
          }
        }
      }
    }