使用手柄杆动态着色

问题描述 投票:0回答:1

我正在循环浏览一个对象,并使用句柄显示一个结果表。

如果某个数字大于50,我想用第一种颜色来显示,如果小于50,我想用另一种颜色来显示。

我对手把式很陌生,所以我不知道该怎么做这个逻辑。我研究了自定义助手,但我不知道如何写出所需的自定义HTMLCSS。

谢谢!我正在循环一个对象,但我不知道如何写出所需的HTMLCSS。

node.js handlebars.js
1个回答
0
投票

把需要的颜色作为输入对象。在定义模板之前,根据你的数字动态设置颜色。

扩展官方车把样板(https:/handlebarsjs.comguide#安装。):

<!-- index.html -->
<html>
<body>
<div id="root"></div>
</body>
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // compile the template
  var template = Handlebars.compile("<div style='color: {{textColor}}''>Handlebars <b>{{doesWhat}}</b>");

  var amount = 55;
  var color = amount > 50 ? "red" : "green"

  document.getElementById("root").innerHTML = template({ doesWhat: "rocks!", textColor: color });
</script>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.