我用Vue仿了一个川普的个人版推特

posts:
  - id: desk-2021-05-post001
    time: '2021-05-06 14:07'
    content: 
      - 好了，终于可以写点自己的东西了。总之这是一个仿美国前总统唐纳德·J·特朗普的个人网站的个人版推特“特朗普的办公桌”而建的应用。
    link:
      - href: https://www.donaldjtrump.com/desk
        text: 特朗普的办公桌
  - id: desk-2021-05-post002
    time: '2021-05-06 23:30'
    content:
      - 试试带图
    picture:
      - https://image.freepik.com/free-psd/top-view-sticker-collection-mock-up_23-2148884437.jpg
      - https://img.freepik.com/free-psd/cardboard-box-with-sticker-mock-up_23-2148897527.jpg?size=338&ext=jpg
      - https://image.freepik.com/free-psd/covid-19-social-media-post_23-2148923225.jpg
      - https://image.freepik.com/free-psd/coronavirus-poster-template_23-2148900209.jpg

/* 大容器开始 */
.desk-unit .picture {
  display: flex;
  flex-wrap: wrap;
}
/* 大容器结束 */
/* 小容器开始 */
.desk-unit .picture .img {
  height: 0px;
  position: relative;
  margin: 0px 10px 10px 0px;
}
.desk-unit .picture .col-1 {
  width: 60%;
  padding-bottom: 60%;
}
.desk-unit .picture .col-2 {
  width: 40%;
  padding-bottom: 40%;
}
.desk-unit .picture .col-3 {
  width: 30%;
  padding-bottom: 30%;
}
/* 小容器结束 */
/* 图片元素开始 */
.desk-unit .picture .img img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 图片元素结束 */

<div class="desk-unit">
  <div class="picture" v-if="picture">
    <div class="img" 
    :class="imgClass"
    v-for="(pic,i) in picture" :key="'pic'+i">
      <img :src="pic">
    </div>
  </div>
</div>

export default {
  data() {
    var imgClass = "";
    if (this.picture) {
      imgClass = this.picture.length==1?"col-1"
      :this.picture.length==2?"col-2"
      :this.picture.length==4?"col-2"
      :"col-3"
    }
    return {
      imgClass
    }
  },
  props: {
    picture: {
      type: Array,
    },
  }
}