Question

我尝试找到有关Polymer 2的条件属性的信息，但我只能在Polymer 1上找到东西。有人知道这样做吗？

Answer 1

在Polymer 1.0中，属性绑定的语法是：

<x-foo attr?="{{boolean-expression}}">

在Polymer 2.0中，?=从$=到<x-foo attr$="{{boolean-expression}}">：

window.addEventListener('WebComponentsReady', () => {
  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }
    
    static get properties() {
      return {
        checked: {
          type: Boolean,
          value: false
        }
      };
    }
    
    _toggleCheck() {
      this.checked = !this.checked;
    }
  }
  customElements.define(XFoo.is, XFoo);
});

<head>
  <base href="https://polygit.org/polymer+v2.5.0/components/">
  <script src="webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <button on-click="_toggleCheck">Toggle check</button>
      <input type="checkbox" checked$="{{checked}}">
    </template>
  </dom-module>
</body>

int main() {
    int lines,lines2;

    printf("Enter the number of lines : ");
    scanf("%d", &lines);

    for(;lines>0;lines--) {
        lines2=lines;
        for(;lines2>0;lines2--){
            printf("*");
        }
        printf("\n");
    }

    return 0;
}

Answer 2

我相信你在找这个？ Polymer attribute binding

@ tony19回答的一些额外信息是绑定，{{value}}用于双向绑定，[[value]]用于单向绑定。有趣的是，如果无法实现双向数据绑定，{{value}}实际上会自动转换为单向绑定。

Answer 3

您可以使用dom-if： Polymer 2.0 dom-if

或者您可以使用计算方法 Observers and computed properties

在dom-repeat中的元素上，例如：

<my-element class$="is-active-[[_isActive(item.active)]]"></my-element>

_isActive(active) {
    return active ? true : false;
}

聚合物2条件属性

3 个答案: