Vue v-for :src 循环显示图片

最新推荐文章于 2024-09-21 11:28:14 发布

佚名-x-

最新推荐文章于 2024-09-21 11:28:14 发布

阅读量2.7k

点赞数 2

分类专栏： html vue 文章标签： vue.js html5

本文链接：https://blog.csdn.net/weixin_43637766/article/details/124313411

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

本文展示了如何在 Vue.js 应用中利用 `v-for` 指令循环遍历数据并动态加载图片。示例代码中，`songMenuData` 数组的每个元素对应一个包含图片、标题和介绍的菜品项。每张图片的 `src` 属性通过 `index` 生成不同的随机图片，避免了图片重复。点击编辑按钮可以触发编辑操作。

摘要由CSDN通过智能技术生成

Vue v-for :src 循环显示图片

<div
     class="col-xs-12 col-md-6"
     v-for="(row, index) in songMenuData"
     :key="index"
     >
  <div class="thumbnail">
    <img
         :src="'https://picsum.photos/650/300?random=' + index + '.jpg'"
         />
    <div id="reSongMenu1" class="caption">
      <h3>{{ songMenuData[index].song_menu_name }}</h3>
      <a
         @click="editSongMenu(index)"
         style="float: right; padding-bottom: 50px"
         >编辑</a
        >
      <p>{{ songMenuData[index].song_menu_introduce }}</p>
    </div>
</div>