Vue中循环渲染img标签中的src

最新推荐文章于 2023-10-08 10:43:58 发布

原创最新推荐文章于 2023-10-08 10:43:58 发布 · 584 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

该文章展示了如何在Vue.js应用中使用template和v-for指令动态渲染一组avatar图片。图片源通过data属性imgs提供，每张图片的src基于不同的avatar_前缀进行循环展示。

template部分：
<div class="avatar_list">
  <img v-for="(item,index) in imgs" 
       :key="index"
       class="avatar" 
       :src="require(`../assets/nenglitupu/${item.src}.png`)" alt="">
</div>

data部分：
imgs: [
        {src:'avatar_a'},
        {src:'avatar_b'},
        {src:'avatar_c'},
        {src:'avatar_a'},
        {src:'avatar_b'},
        {src:'avatar_c'},
        {src:'avatar_a'},
        {src:'avatar_b'}
      ],