vue在一个500px宽的div中显示v-for渲染的头像列表外部有一个添加按钮当头像数量小于10个时头像大小每一行显示4个当10个以上是每一行大小显示6个

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

HTML代码：

<div class="avatar-list" :class="{'four-per-row': perRow === 4, 'six-per-row': 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() {
    // 添加头像的逻辑
  }
}

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