<p><pre class="brush:php;toolbar:false;">&lt;template&gt; &lt;q-page class=&quot;page bg-brown-2 q-pa-lg&quot;&gt; &lt;div v-for=&quot;x in 15&quot; :key=&quot;x&quot; class=&quot;line flex flex-center row&quot;&gt; &lt;div v-for=&quot;y in 24&quot; :key=&quot;y&quot; class=&quot;pic&quot;&gt; &lt;q-img :src=&quot;require('../assets/Pictures/' + getImageId(x,y) + '.png')&quot;&gt;&lt;/q-img&gt; &lt;/div&gt; &lt;/div&gt; &lt;/q-page&gt; &lt;/template&gt; &lt;script&gt; export default ({ name: 'BigPicturePage', methods: { getImageId(row, col) { let picture_id = 359 - ((row - 1) * 24) + (col - 1) return picture_id }, } }) &lt;/script&gt;</pre> <p>所以我想在vue.js中生成一个由许多相同大小的小图像组成的大图像的图像网格。首先，我使用v-for循环遍历行，并创建15个（整个图像是15x24个图像），同时使用x计数器进行迭代。在内部，我使用另一个v-for来填充每一行的24列。如果我只给定y作为数字放在url中，它会渲染相同的行15次，但是它可以工作。当我尝试使用一个简单的函数getImageId(rows, columns)时，它不会渲染任何内容，整个网站都是空白的。图像ID的计算基于0-359的计数，但是为了得到正确的图片排列，我进行了反向计算。我从359中减去行数减1，因为我发现范围从1开始，乘以24以获得每行的起始索引。之后，我将当前列索引添加到计数器中，从行到列递减从359到0。我猜问题在于我对vue语法和结构的使用，因为我对它不太熟悉。欢迎任何帮助。</p>

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

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