Vue v-row 和 v-col 条件渲染问题答案

【问题标题】：Vue v-row and v-col conditional rendering questionVue v-row 和 v-col 条件渲染问题
【发布时间】：2021-03-18 10:04:32
【问题描述】：

所以我有一个看起来像这样的 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 是否有我可以使用的标签

【问题讨论】：

我对您在这里想要实现的目标感到困惑。请提供更多详细信息吗？
我不想将 v-if 添加到我的所有 cols 我想像在 div 标签中一样对它们进行分组，所以我只将 v-if 添加到 div，但 div 标签会更改 UI 我需要一些东西不影响用户界面

标签： vue.js vuetify.js

【解决方案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>

【讨论】：