[Vue.js]繰り返し文(v-for)

複文
同じ文を複読するときに複文を使用します.例えば、ナビゲーションバー上の各タグは、<a>Home</a>, <a>Shop</a> , <a>About</a>のようなaタグの繰り返しから構成される.重複コードの作成を減らすために、v-for構文を使用してみます.
v-for

<a v-for="(k,i) in menu" :key="i">{{k + i}}</a>

...

export default {
  name: 'App',
  data(){
    return{
      ...
      menu : ['Home', 'Shop', 'About'],
    }
  },
  components: {
  }
}

上のコードはv-forを使用するコードです.v-forの性格はfor文とよく似ている.まず、属性値のようにタグ内で宣言します.inを基準として左右に分かれており、上のコードでは左側(k,i)右側にmenuが存在する.
in右(menu)
まず,右側のmenuは重複文の実行回数を表す.このセクションでは、繰り返し文の回数を数値で定義できますが、上記のコードのように変数を割り当てて宣言できます.
次のdataページでは、menuという配列が宣言されています.この配列のサイズは3です.それはfor文が自動的に3回動作することを意味します.
左側(k,i)
次はinの左側にkとiがあります.
まず,kはa,b,cなどの変数で名前をつけて宣言すればよい.この変数は,対応するforゲートの周りを回ると,右側に宣言された回数とともに変化する.右側に宣言された値が配列と同じ場合、配列内の値が順次ポップアップされ、通常の数値であれば1、2、3になります.Nのように、右側の声明のNが増加します.
次に、iは、:keyで再呼び出されるのを見ることができる.これは、ラベルがfor文を迂回すると、一意の番号と同じi値が1増加することを意味します.私の知る限りではhtmlのidに似ていると理解しています.
<右変数が特定数Nの場合>
k値が1ずつ増加することがわかる.

<a v-for="(k,i) in 3" :key="i">{{k}},{{i}}</a>

<右変異変数(配列)の場合>
k値がメニューに宣言された値にバインドされていることがわかります.

<a v-for="(k,i) in menu" :key="i">{{k}},{{i}}</a>

上記の2つの例は、i値をバインドしてタグ付けし、i値が自動的に増加することを示し、結果としてi値が1で増加することを示しています.