如何在v-for循环(Vue)中使用iterationva数据路径

Question

我是Vue的初学者我想使用我的迭代图像文件名作为"；room1.jpg"room2.jpg"房间3.jpg"。。。

这是我的代码，第二行是问题

<div v-for="(p,i) in products" :key="i">
<img src= "./assets/room"+str(i)+".jpg"  class = "room-img">
<h4 @click="modelFlag = true">{{products[i]}}</h4>
<p>{{prices[i]}}</p>
<button @click="increase(i)">sign</button> 
</div>

在Pyhton，我通常使用这个

for i in range(number):
"./assets/room"+str(i)+".jpg"

有类似的方法吗？

Answer 1

您必须按照将变量数据绑定到src中

<div v-for="(p,i) in products" :key="i">
<img :src="`./assets/room${str(i)}.jpg`" class = "room-img">
<h4 @click="modelFlag = true">{{products[i]}}</h4>
<p>{{prices[i]}}</p>
<button @click="increase(i)">sign</button> 

您也可以执行/执行以下操作：:src="'./assets/room'+str(i)+'.jpg'"

它会起作用的。:src和v-bind:src的工作方式相同

参考

https://vuejs.org/api/built-in-directives.html#v-绑定