vue如何在div中，在新增的容器宽度超过当前视口宽度时，自动显示在下一行

要在 Vue 中实现这种效果，你可以使用 CSS 的 `flexbox` 或者 `grid` 布局，配合 Vue 的动态数据绑定和计算属性。这里我会演示如何用 `v-if` 和 `flex-wrap` 来做这个功能：

首先，确保你的组件模板有一个父元素（如 `.container`）设置为 Flex 容器：

<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index" :style="{ width: 'auto', flex: '1 0 auto' }">
      <!-- 这里是你展示的内容 -->
      {{ item }}
      <div v-if="item.length > viewportWidth && index === items.length - 1"> <!-- 当内容超出并是最后一项 -->
        <span>Too long, showing on next line</span>
      </div>
    </div>
  </div>
</template>

然后在你的样式中定义 `.container` 和可能的媒体查询：

.container {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
}

/* 如果你想根据视口宽度动态调整行为，可以在这里添加媒体查询 */
@media (max-width: some-breakpoint) {
  .container {
    flex-wrap: nowrap; /* 在小屏幕下不换行 */
  }
}

接着，你需要在 Vue 的数据中存储视口宽度的值。通常你可以使用 `window.innerWidth` 获取，但为了简化，你可以假设 `viewportWidth` 是一个已知的固定值或从另一个地方获取：

data() {
  return {
    items: [...], // 你的内容数组
    viewportWidth: window.innerWidth || 800, // 假设一个固定的视口宽度
  };
},
computed: {
  // 如果你的视口宽度依赖于某些条件，可以在这里计算它
  adjustedViewportWidth() {
    return this.viewportWidth < someCondition ? ... : this.viewportWidth;
  },
},
watch: {
  // 观察视口大小的变化，如果发生变化，更新计算属性
  $route() {
    this.viewportWidth = window.innerWidth || 800;
  },
}

现在，当你有新的内容添加到数组中并且宽度大于视口宽度时，它将在新的一行显示。如果视口变窄，内容会堆叠在一起直到达到最小宽度。