### 在 Vue 中实现 Form 表单内的两列布局 在 Vue 应用程序中构建表单时，可以利用 CSS 和 HTML 结构来创建具有竖线分隔的双列表单布局。下面是一个具体的例子说明如何做到这一点。 #### 使用 Flexbox 创建两列布局并添加竖线 通过应用 `display: flex` 属性给父容器，并设置子元素宽度以及边框样式，可以在两个输入字段之间轻松加入一条垂直分割线： ```html <template> <form class="two-column-form"> <!-- 左侧栏 --> <div class="column left"> <label for="name">姓名:</label><br /> <input type="text" id="name" v-model="formData.name"><br /><br /> <label for="email">邮箱:</label><br /> <input type="email" id="email" v-model="formData.email"> </div> <!-- 右侧栏 --> <div class="column right"> <label for="phone">电话号码:</label><br /> <input type="tel" id="phone" v-model="formData.phone"><br /><br /> <label for="address">地址:</label><br /> <textarea id="address" v-model="formData.address"></textarea> </div> </form> </template> <script> export default { data() { return { formData: { name: '', email: '', phone: '', address: '' } }; }, }; </script> <style scoped> .two-column-form { display: flex; } .column.left, .column.right { width: 50%; padding-right: 15px; /* 调整右边距 */ } /* 添加竖直边界到右侧栏目前 */ .column.right:before { content: ""; position: absolute; top: 0; bottom: 0; left: -8px; /* 移动至左侧适当位置 */ border-left: 2px solid #ccc; /* 设置线条颜色和粗细 */ } </style> ``` 此代码片段展示了如何使用简单的HTML结构配合CSS样式的组合，在Vue模板里创建一个带有竖直线条分离两侧内容区域的形式化表格[^1]。