Quasar Framework q-input如何移除自动生成的q-field__bottom类div节点

方法1：使用官方原生属性（最推荐） #

Quasar的q-input组件继承了q-field的hide-bottom-space属性，添加该属性后就不会自动渲染底部的.q-field__bottom节点，完全符合需求。
修改后的代码如下：

<q-input
  filled
  outlined
  square
  dense
  clearable
  v-model="vModel"
  :rules="[(val) => (val && val.length > 0)]"
  hide-bottom-space <!-- 新增这行即可 -->
/>

注意：添加该属性后，q-input自带的校验错误提示、底部辅助文字也会一起消失，如果你需要展示校验信息，需要自行在组件外部自定义实现。

方法2：CSS强制隐藏（兼容特殊场景） #

如果你在部分场景下需要保留校验逻辑，但不想让底部节点占用布局，可以给q-input添加自定义类名，用CSS隐藏该节点：

1. 给组件加自定义类：

<q-input
  class="hide-field-bottom"
  filled
  outlined
  square
  dense
  clearable
  v-model="vModel"
  :rules="[(val) => (val && val.length > 0)]"
/>

2. 添加对应的样式：

.hide-field-bottom .q-field__bottom {
  display: none !important;
}

该方法同样会隐藏自带的校验提示，仅适合不需要展示q-input原生底部内容的场景使用。

内容的提问来源于stack exchange，提问作者Super Kai - Kazuya Ito