如何使用 vue 创建动态网格？

Posted 2023-02-22

【中文标题】如何使用 vue 创建动态网格？

【英文标题】：How to create a dynamic grid using vue?

【发布时间】：2019-02-03 15:26:12

【问题描述】：

使用 Vue 动态创建网格的最佳方法是什么？

我正在考虑使用 v-for 循环在页面上为 X 个“模块”生成卡片，但希望将它们排列成 3 行。

例如

 Card | Card | Card
 Card | Card | Card

【问题讨论】：

可能的解决方案，使用计算属性将一维数组重塑为二维数组。然后 v-for 两次。或 v-for 使用 display:flex 的一维数组及其子级使用 flex: 0 0 33.333%

使用 CSS 网格是一种可能的解决方案 (ex -> display:grid; grid-template-columns:1fr 1fr 1fr);

@Sphinx 谢谢，我喜欢 'flex: 0 0 33.33%' 解决方案。

【参考方案1】：

您可以使用CSS grid layout，请务必检查browser support。

我们需要使用display: grid 使容器成为网格容器，并使用grid-template-columns。

您可以创建一个接受数字道具的组件，然后在repeat() 表示法中使用它。

repeat(numberOfColumns, minmax(minColumnSize, maxColumnSize))

new Vue(
  el: "#app",
  data() 
    return 
      cards: [1, 2, 3, 4],
      numberOfColumns: 3,
    
  ,
  computed: 
    gridStyle() 
      return 
        gridTemplateColumns: `repeat($this.numberOfColumns, minmax(100px, 1fr))`
      
    ,
  ,
  methods: 
    addCard() 
      this.cards.push('new-card')
    ,
  ,
)

Vue.config.productionTip = false;
Vue.config.devtools = false;

.card-list 
  display: grid;
  grid-gap: 1em;


.card-item 
  background-color: dodgerblue;
  padding: 2em;


body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;


#app 
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;


ul 
  list-style-type: none;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  Columns: <input v-model.number="numberOfColumns">
  <ul :style="gridStyle" class="card-list">
    <li v-for="(card, index) in cards" class="card-item">
       index + 1 
    </li>
  </ul>
  <button @click="addCard">
    Add card
  </button>
</div>