如何使用 vue 创建动态网格? [英] How to create a dynamic grid using vue?

问题描述

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

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

例如

 卡片 |卡 |卡片卡 |卡 |卡片

解决方案

你可以使用 CSS 网格布局，请务必检查浏览器支持.p>

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

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

repeat({numberOfColumns}, minmax({minColumnSize}, {maxColumnSize}))

new Vue({埃尔:#app"，数据() {返回 {卡片:[1, 2, 3, 4],列数:3，}},计算:{网格样式(){返回 {gridTemplateColumns: `repeat(${this.numberOfColumns}, minmax(100px, 1fr))`}},},方法: {加卡(){this.cards.push('新卡')},},})Vue.config.productionTip = false;Vue.config.devtools = false;

.card-list {显示:网格；网格间隙:1em；}.card-item {背景颜色:dodgerblue；填充:2em；}身体 {背景:#20262E；填充:20px；字体系列:Helvetica；}#应用程序 {背景:#fff;边框半径:4px；填充:20px；过渡:全0.2s；}ul {列表样式类型:无；}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></脚本><div id="app">列:<输入 v-model.number="numberOfColumns"><ul :style="gridStyle" class="card-list"><li v-for="(card, index) in cards" class="card-item">{{ 索引 + 1 }}</li></ul><按钮@click="addCard">添加卡</按钮></div>

What is the best way to create a grid dynamically with Vue?

I was thinking of using the v-for loop to generate cards on a page for X number of 'modules', but would like to arrange them in rows of 3.

e.g

 Card | Card | Card
 Card | Card | Card

解决方案

You can use CSS grid layout, make sure to check browser support.

We'll need to make the container a grid container using display: grid and use grid-template-columns.

You can create a component that accepts a number prop and then use it in the repeat() notation.

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>

这篇关于如何使用 vue 创建动态网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！