vue.js - Vue v-row 和 v-col 条件渲染问题

Question

所以我有一个看起来像这样的 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-cols 添加 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 标签改变了 UI 并垂直显示 v-col 是否有我可以使用的标签

Answer 1

为此，您可以简单地使用好的 'ole template像这样标记:

 <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>