[Внешняя разработка] Записи о некоторых возникших проблемах и их решениях.

Список ul Vue генерируется динамически, и высота его родительского контейнера неверна.

В Vue.js, если вы используете v-forдинамически генерируемые ulсписки, высота родительского контейнера может быть неправильной.
Это связано с тем, что элемент ul по умолчанию имеет поля и отступы , и эти значения по умолчанию могут повлиять на вычисление высоты родительского контейнера .
Чтобы решить эту проблему, вы можете добавить стиль к элементу ul, чтобы очистить поля и отступы по умолчанию . Например:

<template>
  <div class="container">
    <ul class="list">
      <li v-for="(item, index) in items" :key="index">{
    
    {
    
     item }}</li>
    </ul>
  </div>
</template>
<style>
.list {
    
    
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>

В приведенном выше примере используется имя класса, а в стиле установлены атрибуты list-style, поля и заполнения. Это очищает поля и отступы по умолчанию и гарантирует правильность расчета высоты списка. При этом, чтобы родительский контейнер не схлопывался по высоте, к родительскому контейнеру также необходимо добавить стиль очистки float . Например:

.container {
    
    
  overflow: hidden;
}

Это очищает поплавки и позволяет избежать ошибок в высоте родительского контейнера.