vue 中如何引入本地图片, 实现图片循环遍历 & 文字换行循环遍历

vue 中如何引入本地图片, 实现图片循环遍历 & 文字换行循环遍历
要实现图片的循环遍历,
1.在data中把图片的路径用数组组合而成。
比如
data(){
return {
content_top:[
{ title:‘图片1", src:’./imges/a.png’ key:‘0’},
{ title:‘图片2", src:’./imges/b.png’,key:‘1’},
{ title:‘图片3", src:’./imges/c.png’,key:‘2’}
]}}
图片的数据写好了,那么我们就需要在template模块中把数组遍历出来
在这里插入图片描述
你会发现,图片加载不出来,f12控制台看看,发现图片的路径写对了,但是就是没有显示出来。
原来我们路径这样写,编译器无法请求到图片,动态显示图片需要在路径前面加个 require

在这里插入图片描述
加个require ,表示图片的引入。,
有时候我们想在循环的文字中实现换行什么的,在

{{contents.title}}

中实现不了
那么我们就想,有什么可以编译html的,想起了我们的v-html
所以只要
****
就可以
Vue,可以使用v-for指令来进行循环遍历数组。 以下是一个示例代码,展示了如何使用v-for遍历数组并输出每个数组元素: <ul> <li v-for="item in names">{{ item }}</li> </ul> 其,names是一个数组,item是遍历过程每个数组元素的值。在上述代码,通过v-for指令将数组names的每个元素渲染为一个li标签,并输出元素的值。 如果你还需要获取数组元素的下标,可以使用以下的语法: <ul> <li v-for="(item, index) in names">{{ index + 1 }}. {{ item }}</li> </ul> 其,index表示当前元素的下标,item表示当前元素的值。在上述代码,通过v-for指令将数组names的每个元素渲染为一个li标签,并输出下标值和元素的值。 通过使用v-for指令,你可以方便地在Vue数组进行循环遍历,并灵活地输出数组元素的值或下标。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [浅析vue常见循环遍历指令的使用 v-for](https://download.csdn.net/download/weixin_38500222/12957661)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue循环遍历(v-for)](https://blog.csdn.net/yufengguanyun/article/details/123297502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值