欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 会展 > el-image 使用静态资源,通过遍历展示多图

el-image 使用静态资源,通过遍历展示多图

2024/12/26 11:10:03 来源:https://blog.csdn.net/CMDN123456/article/details/140629880  浏览:    关键词:el-image 使用静态资源,通过遍历展示多图

关键代码:(通过v-for 遍历获取)

<div v-for="item in projectCase" :key="item.id" class="block" @click="aa(item)" :id='item.className'><el-image :src='item.url':fit="fit":preview-src-list="item.srcList"></el-image>
</div>

源代码: 

<div v-for="item in projectCase" :key="item.id" class="block" @click="aa(item)" :id='item.className'><p class="head_top">{{item.title}}</p><el-row :gutter="20"><el-col :span="9"><divclass="grid-content bg-purple"><p class="head_bottom">{{item.dsc}}</p></div></el-col><el-col :span="9"><divclass="grid-content bg-purple"><el-image :src='item.url':fit="fit":preview-src-list="item.srcList"></el-image></div></el-col></el-row></div><script>
import caseone from '@/assets/img/product_caseone.jpg';
import casethree from '@/assets/img/product_casethree.png';
import casetwo from '@/assets/img/product_casetwo.png';
import { PublicFunction } from "@/utils/vuePublic"
export default {
data () {return {fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],url: casetwo,srcList: [casetwo],projectCase:[{id:1,title:"erp智能系统",dsc:"",url:caseone,srcList:[caseone],className:"caseone",},{id:2,title:"电力管理系统",dsc:"电力",url:casetwo,srcList:[casetwo],className:"casetwo",},{id:3,title:"学院综合管理系统",dsc:"学院。",url:casethree,srcList:[casethree],className:"casethree",},]}},
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com