vue图片src地址写在模拟数据data中方法

最新推荐文章于 2024-02-19 16:19:47 发布

王小野

最新推荐文章于 2024-02-19 16:19:47 发布

阅读量4k

点赞数

本文链接：https://blog.youkuaiyun.com/wangye111112222/article/details/100008511

版权

本文详细介绍如何在Vue.js中使用v-for指令进行数据循环渲染，并演示如何在data属性中通过require方法正确导入图片资源，实现动态展示不同角色的头像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在data中模拟假数据然后使用循环 v-for

<div class="role-info" v-for="(item,index) in roleData" :key="index" @click="roleClick(item)">
          <img :src="item.imgSrc" alt>
          <h4>{{item.title}}</h4>
        </div>

 data(){
    return {
      roleData: [
        {
          imgSrc: require('../assets/images/benren.png'),
          title: '患者本人',
          type: 1
        },
        {
          imgSrc: require('../assets/images/jiashu.png'),
          title: '患者家属',
          type: 2
        }
      ]
    }
  },

在data中使用require（）方法导入图片src