在 Polymer 3.0 中为 DOM 元素动态分配样式答案

【问题标题】：Dynamically assign styles to DOM Element in Polymer 3.0在 Polymer 3.0 中为 DOM 元素动态分配样式
【发布时间】：2019-02-18 14:49:00
【问题描述】：

我第一次在 Polymer 3.0 中构建一个组件，我想知道如何为 DOM 元素动态分配样式。我正在构建事件的水平时间线，并且我想在设定范围内每年放置垂直标记。在Vue.js，我会做这样的事情：

<year-marker v-for="(year, index) in years" :style="getPercentFromLeft(year)" :key="index"></year-marker>

在此设置中，我将拥有一个包含我想要显示的所有年份的数据结构，并且 v-for 将遍历该数据结构并为每年呈现一个标记。 getPercentFromLeft 函数将计算从屏幕左侧开始标记应定位的百分比。返回值的格式为{left: 10%}。 year-marker 有其他样式，但它们在样式部分中指定。

在Polymer 3.0 中执行此操作的等效方法是什么？如果没有，有什么更好的方法来做到这一点？

【问题讨论】：

是的，您可以在 Polymer 中对子元素进行迭代和计算样式，这只是语法不同，请查看文档。有一些选项，例如 polymer-library.polymer-project.org/3.0/api/elements/dom-repeat（纯聚合物）或者如果您打算使用它们，也可以在光照模板中使用纯 JS。

标签： vue.js polymer polymer-3.x

【解决方案1】：

在 polymer3 中，您可以使用下面的代码来实现。迭代您的数据结构并计算每个项目的样式。

<dom-repeat items="{{years}}"> 
    <template> 
        <paper-item class$={{getPercentFromLeft(year)}}>{{item}}</paper-item> 
    </template> 
</dom-repeat>

getPercentFromLeft 将为每个项目（年份）调用，您可以返回所需的类。

【讨论】：