JavaScript
Node.js
vue.js
pug

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

条件付きレンダリング

条件付きレンダリング

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