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

Question

我是第一次在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中执行此操作的等效方法是什么？如果没有，那么有什么更好的方法呢？

Answer 1

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

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

---

每个项目（年份）都会调用 PercentFromLeft，您可以返回所需的类。