Vueのv-ifの使い方を初心者に分かるように解説してみた
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Vue の v-if の使い方を初心者に分かるように解説してみました。
v-if は、表示したり非表示にしたり切り替えるのが超簡単
v-if は、true と false を切り替えるだけで、表示したり、非表示にすることができます。
表示する方法
<div v-if="true">表示する</div>true なら表示されます。
非表示にする方法
<div v-if="false">表示しない</div>基本的にはこれだけの話です。
これ以降の話は、実際に実装するとしたらどうなるか？という話になります。
表示と非表示を着替えたいとき
まず、前述でやった、True と False を変数で表現します。
<template>
<div v-if="isView">表示する</div>
</template>
<script>
export default {
data() {
return {
isView: true,
}
},
}
</script>これは、「isView」という変数で true と表現して表示されています。
では、false にしてみましょう。
<script>
export default {
data() {
return {
isView: false,
}
},
}
</script>非表示になりました。
つまり、この変数を書き換えるだけで、表示したり、非表示にしたりできるようになりました。
true と false を書き換える関数を書く
<script>
export default {
data() {
return {
isView: false,
}
},
methods: {
showView() {
this.isView = true
},
},
}
</script>showView()という関数で、isView を true に書き換える関数を作りました。
また、isView は初期状態で false なので非表示の状態です。
showView()関数を動かすボタンを設置する
<template
><div>
<div v-if="isView">表示する</div>
<button @click="showView">ボタン</button>
</div>
</template>@click はクリックイベントを付与することができるものです。
「v-on:click」と同じです。
ボタンを押してみましょう。「表示する」が表示されたら OK です。
表示されたり、非表示になったりを切り替えたい
ようは、ボタンを押したら、True になったり False になったり、切り替えるように実装します。
ここまでできていれば簡単で、関数のところを変えます。
methods: {
//できるだけ関数名は分かりやすくつけたいので、仕様が変わったら関数名を変える
toggleIsView() {
this.isView = !this.isView; //tureならfalseに、falseならtrueに変えます。
}
}最終形
<template
><div>
<div v-if="isView">表示する</div>
<button @click="toggleIsView">ボタン</button>
</div>
</template>
<script>
export default {
data() {
return {
isView: false,
}
},
methods: {
toggleIsView() {
this.isView = !this.isView
},
},
}
</script>ボタンを押したら、表示されたり、消えたりするようになりました。
v-show との違い
v-show との違いは、表示される時、つまり true になったときにレンダリングされるということです。
v-show はシンプルに「非表示」なのに対して、v-if は検証 ⇨elements で確認すると、タグ自体が存在しなくなります。
つまり、条件によって、レンダリングされるということです。
特段理由なければ、v-if 使っておけば良いと思います。
別のパターンの条件の書き方
最初にやったパターンは、true と false を変えることによって、表示・非表示を切り替えましたが、それ以外にも書き方があります。
<div v-if="number === 1">１のとき表示する</div>このように、if 文と同じように書くことができます。
<div v-if="text === 'テキスト'">「テキスト」のとき表示する</div>直接 if 文を書くことができます。場合によっては計算式も書けます。
<div v-if="num * 2 > 10">「num*2」が10より大きいときに表示する</div>まとめ
以上です。
誰かの参考になればと思います。
苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。
それでは！
