有条件地在聚合物中添加css类

问题描述

我在聚合物组件中有一个元素，并且想要有条件地添加一个css类。

 < div class = bottom {{completed：item.completed}}> 
  

如果item.isCompleted为true，则添加.completed类。

但是，我遇到以下错误：

表达式语法无效：completed？：item.completed

我不想将孔子树放在模板条件中。是否可以在html标签中使用表达式？

解决方案

更新Polymer 1.0

 < div class $ ={{getClasses（item.completed）}}> 
  

  getClasses：function完成）{
 var classes ='bottom'
 if（completed）classes + ='completed'; 
 return classes; 
} 
  

即使完成可以从 this.item.completed 里面 getClasses（） item.completed 更改时，重新评估函数 getClasses（item.completed） >

original - Polymer 0.5

它应该像

 < div class =bottom {{{completed：item.completed} | tokenList}}> 
  

有关详细信息，请参阅docs：

I have an element inside a polymer component and want to add a css class conditionally.

<div class="bottom {{completed: item.completed}}">

if item.isCompleted is true, then add the .completed class.

However, I've got the following error:

Invalid expression syntax: completed?: item.completed

I don't want to put the hole subtree inside a template conditional. Is it possible to do using an expression inside an html tag? I'm using the last polymer release, is this funtionallity migrated or replaced in any way?

解决方案

update Polymer 1.0

<div class$="{{getClasses(item.completed)}}">

getClasses: function (completed) {
  var classes = 'bottom'
  if(completed) classes += ' completed';
  return classes;
}

Even when completed could be read from this.item.completed inside getClasses() it's important to pass it as parameter from the binding. This way Polymer re-evaluates the function getClasses(item.completed) each time item.completed changed.

original - Polymer 0.5

It should look like

<div class="bottom {{ {completed: item.completed } | tokenList }}">

See docs for more details: http://polymer-project.org/docs/polymer/expressions.html#tokenlist

这篇关于有条件地在聚合物中添加css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！