如何动态设置类名？

我已经从我的最后一个问题here了解到字符串连接在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方法会很棒。

来源

2015-06-05 Subrata Sarkar

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

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

来源

2015-06-05 14:12:26 Zikes

刚注意到href $不像class $那样工作。我试过...但它不工作。对于背靠背问题抱歉。一个完整的新手聚合物:) –

'href $ =“{{value}}”'应该可以工作，但正如你之前所说的字符串连接不起作用，所以你将无法执行'href $ =“http：/ /example.com/{{值}}“'。不过，您可以做类似的事情：https://www.polymer-project.org/1.0/docs/devguide/properties.html#computed-properties – Zikes

字符串连接在Polymer 1.2中起作用，您应该升级。参见：https：//blog.polymer-project.org/releases/2015/11/02/release-1.2.0/ – Whyser

如何动态设置类名？

回答

相关问题