v-ifとv-else
- 真偽値により要素の表示と非表示を切り替えることができる
例題
- 真偽値がtrueの時、YESと画面に表示
- 真偽値がfalseの時、NOと画面に表示
trueの時
<div id="app">
<p v-if="toggle">Yes</p>
</div>
const app = Vue.createApp({
data: () => ({
toggle: true
})
})
app.mount('#app')
falseの時
const app = Vue.createApp({
data: () => ({
toggle: false
})
})
app.mount('#app')
- なにも表示されない
falseの時、画面にNOと表示する
<div id="app">
<p v-if="toggle">Yes</p>
<p v-else>No</p>
</div>
const app = Vue.createApp({
data: () => ({
toggle: false
})
})
app.mount('#app')
- Noが表示される
注意
- v-elseディレクティブはv-showディレクティブと組み合わせて使用することはできない
v-else-ifを使う
- Javascriptで言うところの、else ifに相当する
例題
- 信号機の色の意味を出力するプログラム
- red:Stop
- yellow:Caution
- blue:Go
- それ以外:Not red/yellow/blue
Stopを表示
<div id="app">
<p v-if="color === 'red'">Stop</p>
<p v-else-if="color === 'yellow'">Caution</p>
<p v-else-if="color === 'blue'">Go</p>
<p v-else>Not red/yellow/blue</p>
</div>
const app = Vue.createApp({
data: () => ({
color: 'red'
})
})
app.mount('#app')
- js側で
color: 'red'と設定しているのでStopと表示
Cautionを表示
const app = Vue.createApp({
data: () => ({
color: 'yellow'
})
})
app.mount('#app')
Goを表示
const app = Vue.createApp({
data: () => ({
color: 'blue'
})
})
app.mount('#app')
それ以外を表示
const app = Vue.createApp({
data: () => ({
color: 'orange'
})
})
app.mount('#app')
v-showを使う
- 要素のdisplay CSSプロパティを切り替えることで、表示、非表示を切り替える
例題
- 真偽値がtrueの時、Hello Vue.js!とページに表示する
- 真偽値がfalseの時は、要素は非表示
- ※要素のdisplay CSSプロパティを切り替える
表示
<div id="app">
<p v-show="toggle">Hello Vue.js!</p>
</div>
const app = Vue.createApp({
data: () => ({
toggle:true
})
})
app.mount('#app')
非表示
const app = Vue.createApp({
data: () => ({
toggle：false
})
})
app.mount('#app')
- なにも表示されない
-
display:noneが追加されている
v-ifとv-showの違い
v-if
- 要素をDOMから削除・追加
- 高い切り替えコスト
- v-else、v-else-ifが使える
v-show
- CSS displayプロパティ
- 高い初期描画コスト
- v-else、v-else-ifが使えない