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

为此，您可以简单地使用好的'oletemplate标记，如下所示：

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