vue页面超出显示滚动条滑动展示实例

在Vue中创建一个超出显示滚动条的滑动展示实例，通常会用到CSS的`overflow`属性来控制。以下是一个简单的例子：

1. 首先，创建一个Vue项目，如果还没有安装Vue CLI，需要先安装它。可以使用npm或者yarn来安装Vue CLI。

2. 接着，创建一个新的Vue组件，比如命名为`Scrollable.vue`。

3. 在该组件的模板部分，定义一个`div`容器，并设置高度和`overflow`属性为`auto`，这样当内容超出容器高度时，就会显示滚动条。

4. 在样式部分，定义容器的高度以及滚动条的相关样式。

5. 最后，通过数据绑定来填充内容。

这里提供一个简单的组件示例：

<template>
  <div class="scrollable-container" style="height: 200px; overflow: auto;">
    <div v-for="item in items" :key="item.id" class="item">{{ item.content }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: '内容1' },
        { id: 2, content: '内容2' },
        // 更多内容...
      ]
    };
  }
};
</script>

<style scoped>
.scrollable-container {
  /* 样式定义 */
}

.item {
  /* 样式定义 */
}
</style>

在这个例子中，`.scrollable-container`定义了一个200px高的容器，当内部的`.item`内容超出这个高度时，垂直滚动条会出现，允许用户通过滚动来查看隐藏的内容。