如何动态设置类名？

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>

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

我还不知道是否有解决方法.可能已经使用document.querySelector()但尚未尝试过.如果有一种直接的HTML方法会非常棒.

Answer 1

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

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