Vue.js Vue v行和v列条件渲染问题

我有一个vuetify模板，看起来像这样

<v-row>
 <v-col cols="1"> Text </v-col>
 <v-col cols="1" v-if="condition"> .. </v-col>
 <v-col cols="1" v-if="condition"> .. </v-col>
 <v-col cols="1" v-if="!condition"> .. </v-col>
 <v-col cols="1" v-if="!condition"> .. </v-col>
 <v-col cols="1" v-if="!condition"> .. </v-col>

</v-row>

正文
.. 
.. 
.. 
.. 
.. 

因此，我的问题不是在我所有的v-COL中添加一个v-if，而是有没有一种方法可以将它们分组，我尝试了以下方法：

<v-row>
 <v-col cols="1"> Text </v-col>
 <div v-if="condition>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
 </div>
 <div v-if="!condition>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
 </div>

</v-row>

正文
.. 
.. 
.. 

---

但是div标签会改变用户界面并垂直显示v-col的标签。我可以使用标签吗？为此，您可以简单地使用良好的“ole

模板”

标签，如下所示：

 <template v-if="condition>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
 </template>
 <template v-if="!condition>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
    <v-col cols="1"> .. </v-col>
 </template>

.. 
.. 
.. 

我对您在这里试图实现的目标感到困惑。你能提供更多的细节吗？我不想把v-if添加到我所有的col中，我想把它们像一个div标记一样分组，所以我只把v-if添加到div中，但是div标记改变了UI，我需要一些不影响UI的东西