写一段vue代码,包含三个view，一个view里面包含两个view 一个靠左一个靠右

在Vue.js中，你可以使用`v-if`, `v-for`, 或者组件嵌套来创建这样的布局结构。这里是一个简单的例子，使用`template`和`components`来实现：

<template>
  <div class="container">
    <view-left></view-left>
    <view-right></view-right>
  </div>
</template>

<script>
// 假设我们有两个自定义组件：ViewLeft 和 ViewRight
import ViewLeft from './ViewLeft.vue';
import ViewRight from './ViewRight.vue';

export default {
  components: {
    ViewLeft,
    ViewRight
  }
};
</script>

<style scoped>
.container {
  display: flex;
}

.view-left {
  flex: 0 0 calc(50% - 10px);
  padding: 10px; /* 添加边距以适应内容 */
}

.view-right {
  flex: 0 0 calc(50% - 10px);
  padding: 10px;
}
</style>

<!-- 这里假设ViewLeft.vue 和 ViewRight.vue 文件已存在并定义了各自的视图 -->
<!-- ViewLeft.vue 和 ViewRight.vue 可能像下面这样定义 -->
<!-- ...省略具体内容... -->

在这个例子中，`.container` 使用 `display: flex` 属性创建了一个弹性容器，`view-left` 和 `view-right` 分别占据了容器宽度的一半，并且有固定的边距。

如果你想要动态地控制左右视图是否显示，可以使用条件渲染，比如加上`v-if`或`v-show`。