Generieren Sie ein dynamisches Bildraster: vue.js-Nutzungshandbuch

Question

<template>
      <q-page class="page 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"
            <q-img :src="require('../assets/Pictures/' + getImageId(x,y) + '.png')"></q-img>
          </div>
        </div>
      </q-page>
    </template>

    <script>

    Standard exportieren ({
      Name: 'BigPicturePage',

      Methoden: {
        getImageId(row, col) {
          let picture_id = 359 - ((row - 1) * 24) + (col - 1)
          Bild_ID zurückgeben
        },
      }
    })
    
    </script>

Ich möchte also in vue.js ein Bildraster eines großen Bildes erstellen, das aus vielen kleinen Bildern derselben Größe besteht. Zuerst verwende ich eine V-for-Schleife, um die Zeilen zu durchlaufen und 15 davon zu erstellen (das gesamte Bild besteht aus 15 x 24 Bildern), während ich zum Durchlaufen einen x-Zähler verwende. Intern verwende ich ein weiteres V-for, um die 24 Spalten jeder Zeile zu füllen. Wenn ich in der URL nur y als Zahl eingebe, wird dieselbe Zeile 15 Mal gerendert, aber es funktioniert. Wenn ich versuche, eine einfache Funktion getImageId(rows, columns) zu verwenden, wird nichts gerendert und die gesamte Website ist leer. Die Berechnung der Bild-ID basiert auf einer Zählung von 0-359, aber um die richtige Anordnung der Bilder zu erhalten, habe ich die umgekehrte Berechnung durchgeführt. Ich habe die Anzahl der Zeilen von 359 minus 1 subtrahiert, da ich festgestellt habe, dass der Bereich bei 1 beginnt, und mit 24 multipliziert, um den Startindex jeder Zeile zu erhalten. Danach füge ich den aktuellen Spaltenindex zum Zähler hinzu und verringere ihn von Zeile zu Spalte von 359 auf 0. Ich schätze, das Problem liegt in meiner Verwendung der Vue-Syntax und -Struktur, da ich damit nicht sehr vertraut bin. Jede Hilfe ist willkommen.

Answer 1

我发现，该网站试图加载id为360的图片，但该图片不存在，而我设计的整个函数是为了确保id在任何情况下都不超过359，所以我不知道为什么...

你并没有以那种方式设计函数。使用1和2会得到那个结果... 如果你想要从359到0的所有图片，为什么不直接获取它们然后按顺序显示呢？

console.log(test(1,1)) // 359
console.log(test(1,2)) // 360

function test(row, col) {
  return 359 - ((row - 1) * 24) + (col - 1)
}