0

我正在将 Vue 2 源代码移至 Vue 3（测试版），并遇到了这个问题：

<template>
  <section id="this">   <!-- how to eliminate this? -->
    <div>
      YOU ARE AT HOME 
    </div>

    <h2>Hi <span>{{ uid }}</span></h2>

    <!-- List the projects we have access to -->
    <div id="grid-container-projects">
      <ProjectTile :project="null" />
      <ProjectTile v-for="p in projectsSorted" :key="p.key" :project="p" />
    </div>
  </section>
</template>

<style scoped>
  #this {
    text-align: center;
  }
  ...

细节无所谓。将 应用于text-align: center节点#this是我想要实现的，但没有#this节点。

这是可能的，还是合理的？:)

我尝试了以下方法：

<template>   <-- Vue 3 (beta) -->
  <div>
    YOU ARE AT HOME 
  </div>
 ...
</template>

<style scoped>
  * { 
    text-align: center
  }
  ...

这会执行所需的布局，但会导致浏览器中的堆栈溢出。这当然可能只是 Vue 3 beta 主义。(3.0.0-beta.4)

你将如何进行？保持section原样，或者以某种方式摆脱它？

4

1 回答 1

1

就个人而言，我会选择，section因为您在 div 标签中添加了一个 id 以唯一地集中该元素。

而在第二个选项中，您通常会集中所有组件元素

于 2020-05-17T13:02:30.120 回答