初心者がVue.jsの公式ガイドを勉強するメモ　条件付きレンダリング編

# 条件付きレンダリング

* 今回のお題はこちらです。
* https://jp.vuejs.org/v2/guide/conditional.html
* 実際試して見てください。　(ブラウザーでの結果は掲載していません)

## 条件付きレンダリング
### v-if

* App.vue

``` html
<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

``` html
<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

``` html

<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

``` html
<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

``` html
<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

``` html
<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 使い分けは、実践でコストを考えながら使い分ければいいですね。