vue里面动态渲染data里面图片的方法

最新推荐文章于 2024-08-07 15:01:52 发布

HainesFreeman

最新推荐文章于 2024-08-07 15:01:52 发布

阅读量9.7k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_41829196/article/details/79822379

版权

<template>
  <div class="container">
    <!--相册封面-->
    <div class="cover"  v-for="(item,index) in photoData">
      <img :src="item" alt="" @click="showDot(index)">
      <div class="dot" v-show="flagDot">✓</div>
    </div>
    <!--底部相册选择-->
    <div class="photo-choose">
      <p>相册选择</p>
      <span>(尺寸必须为750*1334)</span>
    </div>
  </div>
</template>

<script>
  import img1 from "../assets/image/cover1.png"
  import img2 from "../assets/image/cover2.png"
  import img3 from "../assets/image/cover3.png"
  export default {
    name: "group_cover",
    data() {
      return {
        flagDot: false,
        photoData:[img1,img2,img3]
      }
    },
    methods: {
      showDot() {
        this.flagDot = !this.flagDot
      }
    }
  }
</script>

<style scoped>
  .container {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .cover {
    position: relative;
    width: 100%;
    height: 97px;
    margin-top: 14px;
  }

  .dot {
    position: absolute;
    right: 14px;
    bottom: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    background: #FE7272;
  }

  .cover img {
    width: 100%;
    height: 97px;
  }

  .photo-choose {
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 48px;
    margin: 0 auto;
    text-align: center;
  }

  .photo-choose p {
    margin-top: 8px;
    font: 16px PingFangSC;
    color: #F8494C;
  }

  .photo-choose span {
    font: 12px PingFangSC;
    color: #666666;
  }

</style>