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

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


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里的内容
          }
        }
      }
    }

你可能感兴趣的:(VUE)