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

为此，您可以像这样简单地使用 good '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>

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

Vue v-row and v-col conditional rendering question

vue.js

vuetify.js