[Vue.js] v-for로 n개씩 그려서 배열합니다.
5615 단어 JavaScriptVue.js
하고 싶은 일
이렇게 n개(이번에는 3개)를 배열하면 줄을 바꾸고 싶어요.
전제: 수조는 API 등에서 수신한 데이터로 몇 개가 올지 모른다.
v-for에서 묘사하기 전에 이런 보도를 본 적이 없기 때문에 필기입니다.
이렇게 v-for
<template>
<div>
<div v-for="(item, index) in array" :key="index">
<li>{{ item }}</li>
</div>
</div>
</template>
<script>
export default {
data() {
return {
array: [
'AMETHYST',
'BLUE-SAPPHIRE',
'CITRIN',
'DIAMOND',
...
]
}
}
}
</script>
분할 배열, 3개당 v-for
컴퓨터로 그룹을 3개로 나누어 그룹에 넣습니다.
배열에서 배열된 그림을 만듭니다.
computed: {
groupedArray() {
const base = this.array.length
const split_cnt = 3 // 何個ずつに分割するか
const grouped_array = []
for (let i=0; i<Math.ceil(base/split_cnt); i++) {
let multiple_cnt = i * split_cnt // 3の倍数
// (i * 3)番目から(i * 3 + 3)番目まで取得
let result = this.array.slice(multiple_cnt, multiple_cnt + split_cnt)
grouped_array.push(result)
}
return grouped_array
// [
// ["AMETHYST", "BLUE-SAPPHIRE", "CITRIN"],
// ["DIAMOND", "EMERALD", "FIRE-OPAL"], ...
// ]
}
}
바깥쪽 배열 v-for, 그중 안쪽 배열 v-for(전달).<div v-for="(items, index) in groupedArray" :key="index">
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</div>
끝.마지막
축소판 그림에 그림을 표시할 때 사용했습니다.
여러분의 참고가 될 수 있다면 좋겠습니다.
참고문
배열을 n개로 나누어 그것들을 모아 배열하다
Reference
이 문제에 관하여([Vue.js] v-for로 n개씩 그려서 배열합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/bakupen/items/bda467558bff0477c8d4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)