如何动态设置 class 名称？

Question

我从上一个问题中了解到 0.9 及更高版本不允许字符串连接（目前我正在迁移到版本 1.0）。

我不得不将每个变量包装在单独的 HTML 元素中。

但是有时我需要使用 href 或 class 属性来动态分配值。我不能让它像下面这样直接工作：

<a href="http://example.com/user/{{userid}}">Link text</a>

因为 1.0 不允许字符串连接！

请看下面的片段。我正在尝试从我的 index.html 传递一个属性值，该属性值又应该替换我的自定义元素内的 class 属性中的值。但它不起作用，我明白为什么。

<dom-module id="multi-color-bar-chart">
  <template>
    <div id="chart">
          <p>{{title}}</p>
          <div class="{{v1bg}}">
              <!-- I want {{v1bg}} to be replaced by value sent from index.html -->
              <span>{{value1}}</span>%
          </div>
          <div class="v2" style="background:#ffcc00;">
              <span>{{value2}}</span>%
          </div>
          <div class="v3" style="background:#369925;">
              <span>{{value3}}</span>%
          </div>
          <div class="clear"></div>
      </div>
      <div class="clear"></div>
  </template>
  <script>
      (function () {
          Polymer({
              is: 'multi-color-bar-chart', //registration of element
              properties: {
                  title: { type: String },
                  value1: { type: String },
                  value2: { type: String },
                  value3: { type: String },
                  v1bg: { type: String }
              }
          });
      })();
  </script>
</dom-module>

这是 index.html

中的片段

<multi-color-bar-chart
  title="Annual"
  value1="45.5"
  value2="22.3"
  value3="32.2"
  v1bg="#ff0000">
  ...
  ...
</multi-color-bar-chart>

我正在通过 v1bg 属性传递十六进制代码 #ff0000，我打算实际替换元素内的属性。

我还不知道是否有解决方法。可能已经使用 document.querySelector() 但还没有尝试过。如果有直接的 HTML 方法那就太好了。

Answer 1

尝试 class$="{{v1bg}}"，因为这将绑定到 class 属性而不是 class 属性.

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding

如何动态设置 class 名称？

How can I set class name dynamically?

polymer

polymer-1.0