<script>
export default {
data() {
return {
drawer: false,
show: false,
show2: false,
cards: [{ name: "card 1" }, { name: "card 1" }, { name: "card 1" }],
};
},
};
</script>
<v-list-item @click="drawer = !drawer">
<v-icon>mdi-chevron-right</v-icon>
</v-list-item>
<v-list-item @click="show = !show">
show1
</v-list-item>
<v-list-item @click="show2 = !show2">
show2
</v-list-item>
<div v-if="show == true">
<v-row no-gutters>
<v-col v-for="card in cards" :key="card">
<v-card
dark
tile
height="200"
width="98%"
style="display: inline-flex"
class="ma-2"
>
<v-card-title>
{{ card.name }}
</v-card-title>
</v-card>
</v-col>
</v-row>
</div>
<div v-if="show2 == true">
<v-row no-gutters>
<v-col>
<v-card
dark
tile
width="98%"
style="display: inline-flex"
class="ma-2"
>
</v-col>
</v-row>
</div>
如果单击 show1,如何将 show2 更改为 false?它可以与多个布尔值一起使用吗?我已经尝试通过数组进行映射,但我似乎无法弄清楚该怎么做。
另外,使用这种方法在部分之间转换会更好,还是我应该使用 :router-to 并以这种方式使用转换?
森栏
相关分类