如果是淡入淡出效果，opacity做动画处理，然后修改display已达到清除元素空间。

分页是分页，导出是导出，让后端做。

既然获取到了’进入可视范围‘，那么相反的条件，不就是’离开可视范围‘

const data = [];
data.forEach((item, index)=>{
    Object.keys(item).forEach((child)=>{
        if(item[child] === null){
            // 处理逻辑
        }
    })
})

因为你的定位没有写完整。
有left || right，却没有top || bottom

请考虑ul列表是不是异步获取数据生成的，获取DOM的操作，要放在ul列表生成之后执行。

1、初始化时，添加hover的class；
2、鼠标划入后，删除hover的class；

<style>
    .app {
        width: 100px;
        height: 100px;
        background: antiquewhite;
    }
    .app.hover {
        background: aquamarine;
    }
    .app:hover {
        background: aquamarine;
    }
</style>

<div id="app" class="app hover">
</div>

<script>
  document.getElementById('app').onmouseenter = function () {
    this.className = 'app'
 }
</script>

v-show设置的是display, false = 'none',所以input不生效。

因为你用的是相对路径

bootstrap