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