Vue-ում զանգվածների դասավորում

Vue-ն թույլ է տալիս ստեղծել պիտակներ ցիկլով: Դա արվում է հատուկ v-for հրահանգի միջոցով: Եկեք տեսնենք, թե ինչպես է այն աշխատում զանգվածների համար: Դրա համար ստեղծենք հետևյալ զանգվածը:

javascriptdata() {
  return {
    arr: ['a', 'b', 'c'],
  }
}

Եկեք արտածենք այս զանգվածի յուրաքանչյուր տարր առանձին պարբերությամբ: Դրա համար ներկայացման մեջ սկզբում ստեղծենք մի պարբերություն.

App.vue<template>
  <p></p>
</template>

Այժմ գրենք մեր պարբերությանը v-for հրահանգը: Այս հրահանգի արժեքով պետք է նշել դասավորվող զանգվածի անունը և այն փոփոխականը, որի մեջ հաջորդաբար կմտնեն այդ զանգվածի տարրերը: Մեր դեպքում զանգվածի անունը կլինի arr, իսկ փոփոխականի համար մենք կհորինենք elem անունը:

App.vue<template>
  <p v-for="elem in arr"></p>
</template>

Արդյունքում մեր պարբերությունը կկրկնվի այնքան անգամ, որքան տարր կա մեր զանգվածում: Եկեք արտածենք դասավորվող տարրերը մեր պարբերությունների տեքստում.

App.vue<template>
  <p v-for="elem in arr">{{ elem }}</p>
</template>

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}