【超Vue.js】条件付きレンダリングとリストレンダリング【セクション3 】

37. v-elseを使って、v-ifがfalseの場合の処理を書く

<div id="app">
  <p v-if="ok">Hello</p>
</div>
 
new Vue({
    el: '#app',
  data: {
    ok: true,
  }
})

38. v-else-ifを使って、複雑な条件式を作る

<div id="app">
  <p v-if="ok">OK</p>
  <p v-elseif="maybeOk">maybe OK</p>
  <p v-else>Not OK</p>
</div>
 
 
new Vue({
    el: '#app',
  data: {
    ok: false,
    maybeOk: true
  }
})

39. templateタグを使用して、不必要な要素を加えずにv-ifを複数の要素に適応させる

検証ツールなどでも全く表示されないモノ。グループ化するよ

v-ifを複数選択したい場合、以下をどのようにまとめるか。

<div id="app">
  <p>Hello</p>
  <template>
    <p v-if="ok">OK</p>
    <p v-if="ok">OK</p>
    <p v-if="ok">OK</p>
  </template>
</div>

[解決策]templateでまとめる

<div id="app">
  <p>Hello</p>
  <template  v-if="ok">
    <p>OK</p>
    <p>OK</p>
    <p>OK</p>
  </template>
</div>

40. v-showを使って、頻繁に何かを切り替える処理のパフォーマンスを高める

<p v-show="ok">Show</p>

display: none;になる。

v-showはtemplateでは使えない

→初期描画が遅い(真偽関係なくDOMに追加してしまうから、falseでもdisplat: none;の状態でセットしてしまう)
→切り替えは早い

v-ifでは切り替え毎に、要素を削除してる(DOMレベルで消してる)から、切り替えが遅い。

41. v-forディレクティブを使用して、配列に基づいてリストを描画する

配列をレンダリングさせる

fruitの部分は変数となっており、名前は何でもおk

<div id="app">
  <ul>
    <li v-for="fruit in fruits">{<200c>{ fruit }}</li>
  </ul>
</div>
 
new Vue({
    el: '#app',
  data: {
    fruits: ['りんご', 'バナナ', 'ぶどう']
  }
})

42. ２つ目の引数に配列のインデックスを取ってv-forを使用する

配列のインデックス

<li v-for="(fruit, index) in fruits">({‌{index}}){‌{ fruit }}</li>

43. オブジェクトに対してv-forディレクティブを使用する

オブジェクトをレンダリングする

<ul>
    <li v-for="value in object">{<200c>{ value }}</li>
  </ul>
 
new Vue({
    el: '#app',
  data: {
    fruits: ['りんご', 'バナナ', 'ぶどう'],
    object: {
        firstName: '太郎',
      lastName: '田中',
      age: 21
    }
  }
})

44. オブジェクトのv-forには、第２引数と第３引数にキーとインデックスを取る

第二引数にキー、第三引数にインデックスを取る

 <ul>
    <li v-for="(value, key, index) in object">{<200c>{index}}-{<200c>{key}}-{<200c>{ value }}</li>
  </ul>
 
new Vue({
    el: '#app',
  data: {
    fruits: ['りんご', 'バナナ', 'ぶどう'],
    object: {
        firstName: '太郎',
      lastName: '田中',
      age: 21
    }
  }
})

45. templateタグを使用して、不必要な要素を加えずにv-forを複数の要素に適応させる

divタグの代わりにtemplateタグを使う

→templateは消えるから、副作用がないし、簡潔にかける

<template v-for="fruit in fruits">
      <li>{<200c>{ fruit }}</li>
      <hr>
</template>

46. n in 10 のように、整数値に対してv-forを適用する

v-forの引数には配列、オブジェクト以外に整数も取れる

<ul>
    <li v-for="n in 10">{<200c>{ n }}</li>
</ul>

47. inの代わりにofを使用してJavaScriptのイテレータ構文に近い書き方をする

inはofに変えれる

<template v-for="fruit of fruits">

48. key属性を付ける必要性を学び、予期せぬバグを起こさないv-forを作る

v-forを使う時は必ずkey属性をつけること！！！

→v-forは、要素の移動を最小限に抑えるアルゴリズムを使用し、可能な限りその場で同じタイプの要素を再利用しようとする、という問題がある。
？？？

先頭のdivタグを削除しても、

<div id="app">
  <ul>
    <div v-for="fruit in fruits">
      <p>{{ fruit }}</p>
      <input type="text">
    </div>
  </ul>
  <button @click="remove">yeah</button>
</div>

new Vue({
el: '#app',
  data: {
  fruits: ['りんご', 'バナナ', 'ぶどう']
  },
  methods: {
    remove: function() {
    // shiftで先頭を削除
      this.fruits.shift()
    }
  }
})

<ul>
    <div v-for="fruit in fruits" :key="fruit">
      <p>{{ fruit }}</p>
      <input type="text">
    </div>
</ul>

一意のkeyを与えることで、一つ一つのdivが一意な存在となり、divタグと配列の対応付けが可能となる。

注意点

templateタグにkey属性は使えない(templateはDOMに表示されないから)
indexを指定してしまう

<div v-for="(fruit, index) in fruits" :key="index">

→先頭のdivタグを削除すると、indexの番号が変わってしまう - keyにはオブジェクトを使って一意なidを付けてあげたりする

Funna(ふんな)の技術ブログ

これまで学んだ技術の備忘録。未来の自分が救われることを信じて