【開発メモ】Vue3の基本的な開発用語・記法の確認メモ③

v-show

v-ifとの違いはタグがレンダリングされるかされないか。
表示されるかされないか、はv-ifと同じ動き。
ただし表示されなかった場合にもv-showはタグがdisplay:noneとして画面上には存在している。
頻繁に表示非表示を切り替えたいならv-showが負担少なくていい

v-for

配列の中身を順番に出せる

const listInit : string[] = ['本庄','高崎']
const list = ref(listInit)

<ul>
    <li v-for="name in list" 
        v-bind:key="name" //配列の中身ひとつずつ出すときの名
    >
    </li>
</ul>

インデックスも出せる

v-for="(name,index) in list"

連想配列を使う時

v-for="(name, id, index) // 引数の順番大事。idは配列のキー。

v-bind:keyの存在意義が良く分からない。
とにかく一意になる値を設定（indexはNG）しておけば良さそう
同じコンポーネント内でおなじkeyが設定されないような工夫は必要

Mapを使ったv-for

const actMapListInit = new Map<number, string>();
actMapListInit.set(1,'要潤')
    
    
    <ul>
      <li
        v-for="[id, name] in actMapList" // エイリアス部分をブラケット[]で囲む
        v-bind:key="id"
        >
        {{ name }}
      </li>
    </ul>

ひとつのオブジェクトの中身(プロパティ)をひとつずつ表示

連想配列と同じような感じ。
そもそもJSの連想配列はオブジェクトらしい。

const objList: {
  id: string,
  name: string,
} = {
  id: '1',
  name: '名前',
}

<ul>
  <li
  v-for="(value, key) in objList"
  v-bind:key="key + value">
  <dt>{{ key }}</dt>
  <dd>{{ value }}</dd>
  </li>
</ul>

オブジェクト配列のv-for

インターフェースを使っているが、インターフェースにする必要はない。
テンプレート変数の定義の時にオブジェクトの型を定義するのでもいい。
ただ、こうやってインターフェースを作っておくと、記述的に楽できるし、
次回以降同じ定義のオブジェクトを作りたいときに、
またインターフェースを継承すればよくなるので楽
あとエンジニアっぽくてかっこいい

const objListInit: ObjTest[] = [
  {
    id: '1', name:'あ'
  },
  {
    id: '2', name:'い'
  },
]

const objList2 = ref(objListInit);

interface ObjTest {
  id: string,
  name: string,
}

<ul>
  <li
  v-for="obj2 in objList2"
  v-bind:key="obj2.name">
  <dt>{{ obj2.id }}</dt>
  <dd>{{ obj2.name }}</dd>
  </li>
</ul>

Mapの中にオブジェクト

// Mapにするのはgetメソッドで値を取り出しやすくなるから
const actMapListInit2 = new Map<number, ObjTest>();
actMapListInit2.set(1,  {id: '1', name:'石川'})
actMapListInit2.set(2,  {id: '2', name:'木崎'})

const actMapList2  = ref(actMapListInit2);
  <!-- Mapを利用するときはv-forのエイリアスは[]になる -->
  <template
    v-for="[id, obj2] in actMapList2" 
    v-bind:key="id">

  <dt>{{ obj2.id}}</dt>
  <dd>{{ obj2.name }}</dd>
  
  </template>

普通に回数指定もできちゃう

5回ループ。始まりは１から。

  <template
  v-for="num in 5"
  v-bind:key="num">
  <ul>
    <li>{{ num }}</li>
  </ul>
</template>

こんな形にすれば始まりの値を調整できる。

v-for="num in 5"
v-bind:value="num + 4"