条件付きレンダリング
- 今回のお題はこちらです。
- https://jp.vuejs.org/v2/guide/conditional.html
- 実際試して見てください。 (ブラウザーでの結果は掲載していません)
条件付きレンダリング
v-if
- App.vue
<template lang="pug">
#app
h1(v-if="ok") Yes
h1(v-else) No
button(@click="ok = !ok") toggle button
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
ok: true
}
},
methods: {
},
computed: {
}
}
</script>
- ディレクティブに書くとこんな感じになるみたいです。
- 実際に表示されるのは、どちらか一方です。
テンプレートでの v-if による条件グループ
- App.vue
<template lang="pug">
#app
template(v-if="ok")
h1 Yes
p あ〜だ
p こ〜だ
template(v-else)
h1 No
p 記憶にございません。
button(@click="ok = !ok") toggle button
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
ok: true
}
},
methods: {
},
computed: {
}
}
</script>
-
<template>は、入れ子にできるんですね。 これでグループ単位での切り分けが出来ます。 - divで書いてもいいですが、余計なタグが追加されるのを防げます。
v-else-if
- App.vue
<template lang="pug">
#App
<template v-if="Math.random() > 0.7">
h1 Title
p Paragraph 1
p Paragraph 2
</template>
<template v-else-if="Math.random() > 0.4">
h1 ELSE IF
p Paragraph 3
p Paragraph 4
</template>
<template v-else>
h1 ELSE
p Paragraph 5
p Paragraph 6
</template>
</template>
<script>
export default {
name: 'app',
data () {
return {
}
},
computed: {
}
}
</script>
- v-else-if は特に説明いらないですね。
key による再利用可能な要素の制御
- App.vue
<template lang="pug">
#app
// key無し 値を引き継ぐ
template(v-if="loginType === 'username'")
label User Name
input(placeholder="Enter your name")
template(v-else)
label Email
input(placeholder="Enter your email adress")
button(@click="loginType = loginType ? '' : 'username'") toggle button
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
loginType: 'username'
}
},
methods: {
},
computed: {
}
}
</script>
- keyが無い場合、切り替えても、入力値は、そのまま引き継いでいることがわかります。
- 蛇足かもしれませんが、これは同じ要素であれば、そのまま値を引き継いでいることの説明です。 違うところだけ書き換えているので、この場合最初は、placeholderの値が違うため書き換えが発生しています。
- ですので、inputに値を入れると、placeholderであった値が入力値に変わるため、値が引き継がれる事を説明しています。
key 有
- App.vue
<template lang="pug">
#app
template(v-if="loginType === 'username'")
label User Name
input(placeholder="Enter your name" key="username")
template(v-else)
label Email
input(placeholder="Enter your email adress" key="email")
button(@click="loginType = loginType ? '' : 'username'") toggle button
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
loginType: 'username'
}
},
methods: {
},
computed: {
}
}
</script>
- 値が引き継がれない事が確認できました。
- ちなみに、keyに同じ値をセットすると、引き継がれることも確認しました。
v-show
- App.vue
<template lang="pug">
#app
button(@click="ok = !ok") Toggle button
div(v-show="ok") Hello!
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
ok: true
}
},
methods: {
},
computed: {
}
}
</script>
- v-show はstyle属性で書き換えているのがわかります。
- v-if は要素自体が無くなっているので、表示の消し方が根本的に違う事がわかります。
v-if vs v-show
- 読みものです。
v-if と v-for
読み物です
以上で、 今回の学習は終了です。
v-if と v-show 使い分けは、実践でコストを考えながら使い分ければいいですね。