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 是否有我可以使用的标签

标签： vue.jsvuetify.js

Answer 1

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