vue3如果ul的li太多展示不了，展示滑动scroll

在Vue 3中，如果你有一个ul元素，其中包含很多li元素，而页面空间有限，导致无法一次性展示全部li，你可以使用滚动条来滑动查看更多内容。这里提供一个简单的示例，使用了v-for来渲染列表，并通过CSS样式确保ul具有滚动条。

<template><ul class="scroll-list"><li v-for="(item, index) in items" :key="index">{{ item }}</li></ul>
</template><script>
export default {data() {return {items: Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`) // 生成100个示例项目};}
};
</script><style>
.scroll-list {height: 200px; /* 设置固定高度 */overflow-y: auto; /* 启用垂直滚动条 */list-style-type: none; /* 移除默认列表样式 */padding: 0; /* 移除默认内边距 */margin: 0; /* 移除默认外边距 */
}.scroll-list li {padding: 8px; /* 添加内边距 */border-bottom: 1px solid #ccc; /* 添加分割线 */
}
</style>

在这个例子中，items数组包含了100个项目。scroll-list类确保了ul有一个固定的高度并且内容超出时显示滚动条。v-for指令用于渲染数组中的每个项目，并为每个li分配一个唯一的key属性。CSS样式是可选的，用于提升用户体验。