Question

here中描述的CSS网格布局表明，网格的单元格没有任何层次结构地添加到了标记中，行和列的布局由CSS指令控制（例如grid-template-columns ）。

创建4列x 2行网格的示例为：

<div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

我很难将这个概念与模板语言一起使用，其中迭代器遍历记录，并且每次迭代都会创建一个包含各个元素的行容器。网格布置了行容器而不是其子容器。

以Vue模板为例，以上内容可以动态呈现如下：

<div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
  <div v-for='item in items>
    <div>{{item.a}}</div>
    <div>{{item.b}}</div>
    <div>{{item.c}}</div>
    <div>{{item.d}}</div>
  </div>
</div>

...但是这将在一行中的每个项目上渲染4块（我希望item.a ... item.d组成行元素，每个{{1 }}代表一行）。

一个人将如何实现这一目标？还是使用模板语言通常是不可能的？

Answer 1

为避免每次迭代创建容器元素，请使用<template> with v-for（而不是<div>）：

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 2, b: 3, c: 4, d: 5 },
        { a: 3, b: 4, c: 5, d: 6 },
        { a: 4, b: 5, c: 6, d: 7 },
      ]
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
    <template v-for='item in items'>
      <div>{{item.a}}</div>
      <div>{{item.b}}</div>
      <div>{{item.c}}</div>
      <div>{{item.d}}</div>
    </template>
  </div>
</div>

动态创建的CSS网格布局

1 个答案: