<div id="app">
<!-- 卡片区域 -->
<div class="card">
<div class="card-header">添加品牌</div>
<div class="card-body">
<!-- 添加品牌的表单区域 -->
<!-- form 表单元素有 submit 事件 -->
<form @submit.prevent="add">
<div class="form-row align-items-center">
<div class="col-auto">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">
品牌名称
</div>
</div>
<input
type="text"
class="form-control"
placeholder="请输入品牌名称"
v-model.trim="brand"
/>
</div>
</div>
<div class="col-auto">
<button
type="submit"
class="btn btn-primary mb-2"
>
添加
</button>
</div>
</div>
</form>
</div>
</div>
用trim判断数据是否为空