【3.8日踩坑】v-for遍历对象类型、隐藏滚动条样式保留鼠标滚动的方法

1.v-for遍历对象类型

        1.1问题情景

                需要对后端传递一个json对象进行回显，需要使用对象的key值，却发现自己不会用v-for处理对象类型

        1.2解决方法

        v-for处理对象时，指令的语法是v-for="(item, key, index) in datas"，其中item是当前循环项，key是当前循环项的键（仅在遍历对象时可用），index是当前循环索引。

<div v-for="(item, key, index) in data" :key="index">
    <p>Index: {{ index }}, Key: {{ key }}, Value: {{ item }}</p>
</div>

data:{
        '果实':[0,1,2],
        '根茎':[0,2,2]
      }

2.隐藏滚动条样式保留鼠标滚动的方法

        2.1问题情景

        需要处理一个列表隐藏滚动条，但鼠标滚动效果依旧保留。

        2.1解决方法

        通过伪元素选择器选择到滚动条并将其隐藏，::-webkit-scrollbar {: 这是一个针对WebKit渲染引擎（如Chrome和Safari）的伪元素选择器），::-moz-scrollbar { display: none; }: 这是一个针对Gecko渲染引擎（如Firefox）的伪元素选择器，::-ms-scrollbar { display: none; }: 这是一个针对Trident渲染引擎（如旧版本的Internet Explorer）的伪元素选择器。

ul {
        &::-webkit-scrollbar {
                display: none;
              }

        &::-moz-scrollbar {
              display: none;
        }

        &::-ms-scrollbar {
            display: none;
        }
}

在其中& 符号通常是在预处理器（如Sass或Less）中使用的，用于引用父选择器。在纯CSS中，你应该直接使用父选择器的名称。