vue 两个div并排显示

要在Vue中实现两个div并排显示，可以使用CSS的flexbox来实现。以下是一个示例代码：

<template>
  <div class="container">
    <div class="item">Div 1</div>
    <div class="item">Div 2</div>
  </div>
</template>

<style>
.container {
  display: flex;
}

.item {
  flex: 1;
  margin: 10px;
}
</style>

在上面的示例中，我们使用了一个名为`container`的div作为容器，并将其样式设置为`display: flex;`，这将启用flexbox布局。

然后，我们在容器中放置两个名为`item`的div，这些div将并排显示。通过设置`flex: 1;`，我们使每个`item`div都占据相等的空间，并通过设置`margin`为10px来为它们添加间距。

这样，两个div就能够并排显示在Vue应用中了。

相关问题

vue 多个div显示隐藏

在Vue中，我们可以使用v-show或v-if指令来控制多个div的显示和隐藏。

首先，我们可以使用v-show指令来根据条件控制div的显示和隐藏，例如：

<template>
  <div>
    <button @click="showDiv1 = !showDiv1">显示/隐藏Div1</button>
    <div v-show="showDiv1">这是Div1</div>

    <button @click="showDiv2 = !showDiv2">显示/隐藏Div2</button>
    <div v-show="showDiv2">这是Div2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv1: true,
      showDiv2: false
    };
  }
};
</script>

另外，我们也可以使用v-if指令来根据条件添加或移除DOM元素来实现显示和隐藏的效果，例如：

<template>
  <div>
    <button @click="toggleDiv('div1')">显示/隐藏Div1</button>
    <div v-if="divToShow === 'div1'">这是Div1</div>

    <button @click="toggleDiv('div2')">显示/隐藏Div2</button>
    <div v-if="divToShow === 'div2'">这是Div2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      divToShow: ''
    };
  },
  methods: {
    toggleDiv(div) {
      this.divToShow = this.divToShow === div ? '' : div;
    }
  }
};
</script>

以上两种方法都可以实现多个div的显示和隐藏效果，在具体使用时可以根据实际需求选择合适的方法。

vue中让两个div标签上下显示

在Vue中，也可以使用flexbox布局来实现两个div上下排列。代码如下：

HTML代码：

<template>
  <div class="container">
    <div class="box1">上面的div</div>
    <div class="box2">下面的div</div>
  </div>
</template>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
}

.box1 {
  background-color: #FFC0CB;
  height: 100px;
}

.box2 {
  background-color: #ADD8E6;
  height: 200px;
}

以上代码与前面的纯HTML/CSS代码基本一致，只是放在了Vue的`<template>`中。在Vue中使用CSS样式的方式与纯HTML/CSS基本相同，只需要将样式放在Vue组件的`<style>`标签中即可。