<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判断数据是否为空