关键代码:(通过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",},]}}, }