vue2.0如何实现一个一行四列的数据，已知总数和每列的数量，如何计算出每列所占每行总数的整数比

可以使用计算属性来计算出每列所占每行总数的整数比。具体实现步骤如下：

1. 在data中定义总数和每列的数量：

data() {
  return {
    total: 20,
    columnCount: 4
  }
}

2. 在计算属性中计算每列所占每行总数的整数比：

computed: {
  columnRatio() {
    const { total, columnCount } = this;
    const columnTotal = Math.floor(total / columnCount);
    const remainder = total % columnCount;
    const ratios = Array(columnCount).fill(columnTotal);
    for (let i = 0; i < remainder; i++) {
      ratios[i]++;
    }
    return ratios;
  }
}

3. 在模板中使用v-for循环渲染数据，并将每列所占每行总数的整数比作为样式flex-basis的值：

<template>
  <div class="container">
    <div v-for="(ratio, index) in columnRatio"
         :key="index"
         class="column"
         :style="{ flexBasis: ratio + '%' }">
      {{ ratio }}
    </div>
  </div>
</template>

完整代码示例如下：

<template>
  <div class="container">
    <div v-for="(ratio, index) in columnRatio"
         :key="index"
         class="column"
         :style="{ flexBasis: ratio + '%' }">
      {{ ratio }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 20,
      columnCount: 4
    }
  },
  computed: {
    columnRatio() {
      const { total, columnCount } = this;
      const columnTotal = Math.floor(total / columnCount);
      const remainder = total % columnCount;
      const ratios = Array(columnCount).fill(columnTotal);
      for (let i = 0; i < remainder; i++) {
        ratios[i]++;
      }
      return ratios;
    }
  }
}
</script>

<style>
.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.column {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
}
</style>