为 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 函数将计算标记应位于屏幕左侧的百分比。 return 值的格式为 {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>

getPercentFromLeft 将为每个项目（年）调用，您可以 return 所需的 class。

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

Dynamically assign styles to DOM Element in Polymer 3.0

polymer

vue.js

polymer-3.x