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

问题描述

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

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

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

:style="{ title: gridArea }"

解决方法

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

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