Vue - 如何动态设置网格区域名称
Vue - How to dynamically set a grid area name
我有一个 objects 的列表，我循环遍历并在模板内生成。这些 objects 需要根据屏幕尺寸在网格内以不同的方式定位。
所以我想在CSS中使用grid-area属性来定义它们在不同屏幕尺寸下的位置。但是我面临的问题是我找不到如何为每个元素动态定义 grid-area 名称。
我试过跟随，但没用。我在网上搜索过，但没有找到任何解决方案。标题变量是一个字符串，其中包含需要为 grid-area 属性.
设置的名称
:style="{ title: gridArea }"
对于“双名 属性”，您可以将其包装在字符串中
<div class="block" :style="{ 'grid-area': title }">...</div>
我有一个 objects 的列表，我循环遍历并在模板内生成。这些 objects 需要根据屏幕尺寸在网格内以不同的方式定位。
所以我想在CSS中使用grid-area属性来定义它们在不同屏幕尺寸下的位置。但是我面临的问题是我找不到如何为每个元素动态定义 grid-area 名称。
我试过跟随，但没用。我在网上搜索过，但没有找到任何解决方案。标题变量是一个字符串，其中包含需要为 grid-area 属性.
设置的名称:style="{ title: gridArea }"
对于“双名 属性”，您可以将其包装在字符串中
<div class="block" :style="{ 'grid-area': title }">...</div>