vue10条数据滚动，超出后删除怎么实现

可以使用Vue的计算属性和数组的slice方法来实现数据滚动和删除。

首先，在data中定义一个数组来存储数据，例如：

data: {
  dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

然后，在template中使用v-for指令来循环渲染数据，并使用计算属性来控制显示的数据数量，例如：

<template>
  <div>
    <ul>
      <li v-for="item in displayList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  computed: {
    displayList() {
      return this.dataList.slice(0, 10) // 控制显示的数据数量为10条
    }
  }
}
</script>

接下来，可以使用定时器来实现数据滚动和删除。在mounted钩子函数中定义一个定时器，每隔一定时间就将数组的第一个元素删除，并将一个新的元素添加到数组的末尾，例如：

mounted() {
  setInterval(() => {
    this.dataList.shift() // 删除第一个元素
    this.dataList.push(Math.random() * 100) // 添加一个新的元素
  }, 1000) // 每隔1秒执行一次
}

这样就可以实现数据滚动和删除了。完整代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in displayList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  computed: {
    displayList() {
      return this.dataList.slice(0, 10) // 控制显示的数据数量为10条
    }
  },
  mounted() {
    setInterval(() => {
      this.dataList.shift() // 删除第一个元素
      this.dataList.push(Math.random() * 100) // 添加一个新的元素
    }, 1000) // 每隔1秒执行一次
  }
}
</script>