Question

我是Polymer.js和css的新手。我试图实现的是todo.item通常在todo.done为假时显示文本，并在todo.done为真时显示直线。

我正在考虑使用css来做这件事，但不知道如果用css做if / else怎么做。以下代码将为所有这些代码添加换行符。在这种情况下css会选择，还是其他什么应该更好？

      <ol>                                                                     
        <template is="dom-repeat" items="{{ticket.todos}}" as="todo">          
          <style>                                                           
            .todo-item{                                                     
              text-decoration: line-through;                                
            }                                                               
          </style>                                                          
          <li><span class="todo-item" done="{{todo.done}}"> {{todo.item}}</span></li>
        </template>                                                            
      </ol>

Answer 1

这是一个简单的css属性相关解决方案（没有特定的聚合物，但也应该与聚合物一起使用）

<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    span[done] {
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <span done>Done</span>
  <br>
  <span>Not done</span>
</body>

</html>

注意： done应绑定为done$={{item.done}}。使用Polymer中的$=绑定属性。

如何改变聚合物的字体风格

1 个答案: