vue中form表单的样式
时间: 2023-11-20 21:59:34 浏览: 33
Vue 中的表单样式可以使用 CSS 或者相关的 UI 框架进行设置,以下是一些基本的表单样式设置:
1. 使用 HTML 自带的表单控件样式:
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</form>
```
2. 使用 Bootstrap 框架的表单样式:
```html
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
</form>
```
3. 使用 Element UI 框架的表单样式:
```html
<el-form>
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>
```
以上是一些基本的 Vue 表单样式设置方法,你可以根据需要选择不同的 UI 框架或者自定义样式来设置表单样式。