동적 이미지 그리드 생성: vue.js 사용 가이드
<p><pre class="brush:php;toolbar:false;"><템플릿>
<q-page class="페이지 bg-brown-2 q-pa-lg">
<div v-for="x in 15" :key="x" class="line flex flex-center row">
<div v-for="y in 24" :key="y" class="pic">
<q-img :src="require('../assets/Pictures/' + getImageId(x,y) + '.png')"></q-img>
</div>
</div>
</q-페이지>
</템플릿>
<스크립트>
기본값 내보내기({
이름: 'BigPicturePage',
방법: {
getImageId(행, 열) {
picture_id = 359 - ((행 - 1) * 24) + (열 - 1)
picture_id 반환
},
}
})
<p>그래서 vue.js에서 동일한 크기의 작은 이미지 여러 개로 구성된 큰 이미지의 이미지 그리드를 생성하고 싶습니다. 먼저 v-for 루프를 사용하여 행을 반복하고 x 카운터를 사용하여 반복하면서 15개(전체 이미지는 15x24 이미지)를 생성합니다. 내부적으로는 또 다른 v-for를 사용하여 각 행의 24개 열을 채웁니다. URL에 y를 숫자로 지정하면 동일한 행이 15번 렌더링되지만 작동합니다. 간단한 함수 getImageId(행, 열)를 사용하려고 하면 아무것도 렌더링되지 않고 전체 웹 사이트가 비어 있습니다. 이미지 ID 계산은 0-359 카운트를 기반으로 하지만 사진의 올바른 배열을 얻기 위해 역 계산을 수행했습니다. 범위가 1에서 시작하고 각 행의 시작 인덱스를 얻기 위해 24를 곱했기 때문에 359에서 1을 뺀 행 수를 뺍니다. 그런 다음 현재 열 인덱스를 카운터에 추가하고 행마다 359에서 0으로 감소시킵니다. 문제는 vue 구문과 구조에 익숙하지 않기 때문에 사용하는 데 있다고 생각합니다. 어떤 도움이라도 환영합니다. </p>
