vue 循环遍历背景图

最新推荐文章于 2024-03-13 15:49:19 发布

WinterWang0207

最新推荐文章于 2024-03-13 15:49:19 发布

阅读量3.2k

点赞数 1

分类专栏： Vue小笔记

本文链接：https://blog.csdn.net/weixin_38404899/article/details/103703185

版权

Vue小笔记专栏收录该内容

32 篇文章 2 订阅

订阅专栏

//循环背景图获取index
<template>
  <div id="app">
      <div class='pic'  
        v-for="(item,index) in list"  
        :key=index :style="{backgroundImage:'url(' + item.img+ ')', 
        backgroundRepeat:'no-repeat',backgroundSize: 'cover'}" 
        @click="handleCilck(index)">
      </div>
  </div>
</template>

<script>
export default {
  name: 'demo13',
   data(){
        return {
          list:[
            {img:require('./logo.png')},
            {img:require('./miao.jpg')},
            ]
        }
   },
   methods:{
     handleCilck(index){
        console.log(index)
     }
   }
}
</script>

<style scoped>
.pic{
  width: 300px;
  height: 300px;
}
</style>