Vue.js 实现头像列表动态布局 - 根据数量调整每行显示个数

可以使用计算属性来根据头像数量动态计算每行显示的个数，然后根据计算属性的值来动态设置CSS样式。

HTML代码：

<div class='avatar-list' :class='{&#x27;four-per-row&#x27;: perRow === 4, &#x27;six-per-row&#x27;: perRow === 6}'>
  <div v-for='avatar in avatars' :key='avatar.id' class='avatar'>
    <img :src='avatar.url' alt='avatar'>
  </div>
</div>
<button @click='addAvatar'>添加头像</button>

CSS代码：

.avatar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.four-per-row .avatar {
  width: 25%;
}

.six-per-row .avatar {
  width: 16.666%;
}

Vue代码：

data() {
  return {
    avatars: [], // 头像列表
  }
},
computed: {
  perRow() {
    if (this.avatars.length < 10) {
      return 4;
    } else {
      return 6;
    }
  }
},
methods: {
  addAvatar() {
    // 添加头像的逻辑
  }
}

这样就可以根据头像数量动态设置每行显示的个数了。