实现效果
实现代码
<!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>
2. @scroll 只要一滚动,就输出一次 @ 符号;
<!-- 滚动条滚动事件 @scroll -->
<ul @scroll="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
3. @wheel 只有鼠标滚轮触发事件
<ul @wheel="demo" 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 在启动时,生成生产提示
new Vue({
el:'#root',
methods:{
demo(){
console.log('@')
}
}
})
</script>
</body>
</html>