Polymer 2 条件属性

Question

我尝试查找有关 Polymer 2 的条件属性的信息，但我只能找到有关 Polymer 1 的信息。有人知道吗？

Answer 1

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

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

在 Polymer 2.0 中，syntax changed 从 ?= 到 $=：

<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>

Answer 2

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

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

Answer 3

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

或者你可以使用计算方法观察者和计算属性

在 dom 中的一个元素上重复例如：

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

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

Polymer 2 条件属性

Polymer 2 Conditional Attributes

javascript

node.js

web

polymer