Vueを知るには-HTML重複v-for

2745 ワード
vue テキストリンク
HTML重複v-for
HTMLで重複するコードは、v-for構文で繰り返し生成できます.
これは既存のfor反復文に似た文法です.
  • 使い方<태그 v-for="변수 in 횟수" :key="유니크한 값">
    • 必要なラベルでは、v-for=「繰り返しで名前を付けた回数」です.
    また、この繰り返し生成されるタグには、独自のキー値が必要です.(Reactと同じ)
  • v-for反復文ではarray/objectなどの資料型を用いることができる.
    • <div class="menu">
  <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>
</div>

data(){
  return {
    메뉴들 : ['Home', 'Shop', 'About']
  }
}
    これらのメニューはarray資料型で巡回され、書かれた変数は資料型でデータになります.
    たとえば、書き出した変数が出力時に「ホーム」を1回、「Shop」を2回繰り返すとこうなります.

  • v-forでは、最大2つの変数を作成できます.
    1つ目はデータ型内のデータであり、2つ目は前述したようにデータの順序(インデックス)である.

  • :key="の用途
    Vueで重複文を書くときは必ず書きます.
    コンピュータは繰り返し回転する要素を区別するために使用されます.
    keyの内容は、インデックスとして一般的なユニークな値を使用する必要があります.
    • 白駿1987文字
    [programmers]矩形星図-JS