样式修饰中加 overflow: auto;
实现效果
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<!-- 引入vue -->
<script type="text/javaScript" src="../js/vue.js"></script>
<style>
/* *:通配符,设置所有元素边距 */
*{
margin-top: 20px;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
/* 滚动条设置,当 li 高度和 超过 ul 高度时,会自动生成滚动条 */
overflow: auto;
}
li{
height: 50px;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!--
ul: unordered lists 无序列表
ol: ordered lists 有序列表
li: list item 列表项
-->
1. 设置滚动条 overflow: auto;
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javaScript">
Vue.config.productionTip = false // 阻止 vue 在启动时,生成生产提示
</script>
</body>
</html>