Question

我之前已经看过角度，并想知道这在聚合物中是否可行。 Angular - What is the best way to conditionally apply a class?

我已经设置了一个名为'animated'的属性：

animated: {
  type: Boolean,
  value: false,
},

当动画为真时，我元素中的div应该有一个 .animate 的css类。

<div class=""></div>

现在我已经在ready函数内完成了。但是，自从我遇到Stackoverflow问题后，我想知道这是不可能的聚合物。

谢谢！

Answer 1

一种方法是使用如下函数：

<div class$="{{_getClass(animated)}}"></div>

class$带$符号表示Polymer的属性是使用数据绑定生成的。因此，您的_getClass函数将如下所示：

_getClass: function(animated){
   return animated ? "animate" : "";
}

当animate属性发生更改时，将调用_getClass函数，此函数将返回指示所需类的字符串。

Answer 2

您还可以使用Polymer

的toggleClass方法

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="my-element">
  <template>
    <style>
      .show {
        display: block !important;
        border: 1px solid black;
      }
      .hide {
        width: 100px;
        height: 100px;
        display: none;
      }
    </style>
    <div class="hide" id="toggle"></div>
    <button on-tap="_toggleDiv">Press to toggle</button>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-element',
    properties: {
      show: {
        type: Boolean,
        value: false
      }
    },
    _toggleDiv: function() {
      this.show = !this.show;
      this.toggleClass('show', this.show, this.$.toggle);
    }
  });
</script>

<my-element></my-element>

当属性为true时，Polymer添加类

2 个答案: