在做项目的过程中，模版相同，可是不标题和图片不同，循环标题我们知道可以用v-for循环，可是图片路径怎么循环？
【如何使用v-for循环图片路径】先上效果图：（图片是随便找的）
文章图片
问题解决：
首先要在js中引入需要的循环的图片
import img1 from "@/static/img-01.jpg"
import img2 from "@/static/img-02.jpg"
import img3 from "@/static/img-03.jpg"
import img4 from "@/static/img-04.jpg"
然后在需要循环的部分用v-for循环
如下：
<
view class="main">
<
view class="main-item" v-for="title in titles">
<
view>
<
view class="title" >{{title.text}}<
/view>
<
/view>
<
view>
<
image class="main-img" :src="http://www.srcmini.com/title.img" mode=""><
/image>
<
/view>
<
/view>
<
/view>
注意图片部分的路径，src前面有【：】此处是使用了vue绑定了src属性进行数据传递。
最后是循环的数据：
export default {
data() {
return {
titles:[
{text:'限时抢购',img:img1},
{text:'天猫好物',img:img2},
{text:'聚划算',img:img3},
{text:'天猫闪购',img:img4}
],
}
}
}
titles是一个数据，每个元素都是一个对象，我们访问的对象的属性的时候，使用元素的子项来访问。
推荐阅读
- C语言简明教程（七）（运算符、表达式和语句）
- 限制element-ui 表格显示行数
- vue.js实现分页查询
- vue.js的组件和模板
- C语言简明教程（六）（字符串、常量和格式化输入输出实例详解）
- C语言遍历数组的两种方式
- 巫师故事3（狂猎的背后故事）
- 英雄传说（北美公布冷钢之路IV）
- 游戏评测（排他性的重要性正在下降）