如何在玉石模板中进行javascript数学运算？

Question

我希望亮度是列表中项目顺序的函数

这里是订单变量

{{order}}

这是我试图修改

的模板语言

.minicard(style="background-color:hsl(354,100%,{{(order * 2)+46}}%)")

我基本上要做的是将2乘以2并加上它。

{{order}}有效，但在大括号内做数学似乎并不适用。如何在玉石模板中做简单的javascript？

Answer 1

不需要JavaScript，你可以这样做：

- order = 10
- order = order * 2 + 45

.minicard(style="background-color:hsl(354,100%,"+order+"%;")

或者你可以内联：

- order = 10

.minicard(style="background-color:hsl(354,100%," + (order * 2 + 45) + "%;")

两者都应汇编成：

<div class="minicard" style="background-color:hsl(354,100%,65%"></div>

请参阅此处的工作示例 - https://codepen.io/AdamCCFC/pen/pWoxXV