vue3 div 设置了display，我想在内部容器里取消外部的display

在 Vue 中，你可以使用动态绑定的方式来控制元素的样式。对于你的情况，可以在内部容器中重新定义 `display` 属性，将其设置为默认值 `block`，从而取消外部容器的 `display` 属性。以下是一个示例代码：

<template>
  <div class="outer" :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }">
    <div class="inner" style="display: block;">内部容器</div>
  </div>
</template>

<style>
.outer {
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
}
</style>

在上面的代码中，我们在外部容器 `.outer` 中设置了 `display: flex;`、`justify-content: center;` 和 `align-items: center;` 来实现垂直水平居中。在内部容器 `.inner` 中，我们将 `display` 属性重新定义为 `block`，从而取消了外部容器的 `display: flex;` 效果。你可以根据实际需求调整内部容器的样式。

需要注意的是，在 Vue 中，可以使用 `:class` 或 `:style` 绑定动态样式，如上所示。`:style` 绑定的是一个对象，对象的属性名为 CSS 属性名，属性值为 CSS 样式值。而 `:class` 绑定的是一个表达式，可以是一个对象或数组。在对象语法中，键名是 CSS 类名，值是布尔值或返回布尔值的表达式；在数组语法中，数组的每一项都是一个 CSS 类名。你可以根据需要选择适合的方式进行样式绑定。