Vuetifyで条件分岐を行う方法
今回はVuetifyで条件分岐を行う方法についてご紹介いたします。
Vuetifyで条件分岐を行う方法
VuetifyはVue.jsやNuxt.jsのCSSフレームワークとなりますが、Vuetifyの条件分岐もVue.jsなどの場合と変わりません。v-ifやv-else、v-else-ifを利用します。
例えば、次のようなソースコードならtestModelがtrueならば「testModelがtrue」という文字列がv-cardとして、testModelがfalseならば「testModelがfalse」という文字列がv-cardとして現れます。
|
1 2 3 4 5 6 7 8 9 10 |
<template v-if="testModel"> <v-card> <v-card-title>testModelがtrue</v-card-title> </v-card> </template> <template v-else> <v-card> <v-card-title>testModelがfalse</v-card-title> </v-card> </template> |
終わりに
今回はVuetifyで条件分岐を行う方法についてご紹介いたしました。