Vue - 如何动态设置网格区域名称答案

【问题标题】：Vue - How to dynamically set a grid area nameVue - 如何动态设置网格区域名称
【发布时间】：2021-06-19 21:55:55
【问题描述】：

我有一个对象列表，我在模板中循环并生成这些对象。根据屏幕尺寸，这些对象需要在网格内以不同的方式定位。

所以我想使用 CSS 中的 grid-area 属性来定义它们在不同屏幕尺寸中的位置。但我面临的问题是我找不到如何为每个元素动态定义网格区域名称。

我尝试过关注，但它不起作用。我在网上搜索过，但没有找到任何解决方案。 title 变量是一个字符串，其中包含需要为 grid-area 属性设置的名称。

:style="{ title: gridArea }"

【问题讨论】：

所以标题包含网格区域名称？
:style="{ gridArea: xxx }" -> developer.mozilla.org/en-US/docs/Web/CSS/grid-area
是的，没错。另外，它是一个没有任何空格的字符串。单词之间用“_”隔开。

【解决方案1】：

对于“双重名称属性”，您可以将其包装在字符串中

<div class="block" :style="{ 'grid-area': title }">...</div>

【讨论】：