Vue：列表布局50%的时候并排，100%时行布局

<div style="width: 100%;border:1px solid red;">
   <div v-for="(item, index) in content.list" :key="index" class="tpl-item"
               :style="{width:item.type === '18' ? '50%' : '100%',border:'1px solid red' }">
    </div>

</div> 

两个 50% 宽度并排，一个 100% 宽度换行

<template>
  <div class="outer-container">
    <div v-for="(item, index) in content.list" :key="index" :class="getItemClass(index)" class="tpl-item">
      <!-- 这里可以添加每个元素的具体内容 -->
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: {
        list: [
          { type: '18', name: 'Item 1' },
          { type: '18', name: 'Item 2' },
          { type: 'other', name: 'Item 3' },
          { type: '18', name: 'Item 4' },
          { type: '18', name: 'Item 5' },
          { type: 'other', name: 'Item 6' }
        ]
      }
    };
  },
  methods: {
    getItemClass(index) {
      const remainder = index % 3;
      if (remainder === 0 || remainder === 1) {
        return 'half-width';
      }
      return 'full-width';
    }
  }
};
</script>

<style scoped>
.outer-container {
  width: 100%;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
}

.tpl-item {
  box-sizing: border-box;
  border: 1px solid red;
}

.half-width {
  width: 50%;
}

.full-width {
  width: 100%;
}
</style>