Polymer 3 中的条件渲染

Question

我需要根据布尔变量 true 或 false 值呈现不同的 html。例如在反应中我会在渲染函数的 return 中做这样的事情：

{this.state.booleanValue ? "true" : "false"}

根据 booleanValue 的值，我得到两个不同的输出。

我在 Polymer 3 中尝试过，并首先声明了我的 bool 变量：

static get properties() {
    return {
      myBoolValue: {
        type: Boolean
      }
    };
  }

然后我尝试在我的 template/html 中使用它作为

${this.myBoolValue ? "" : ""}

但是，代码无法识别 html 模板中的变量“this.myBoolValue”。怎么会？我的模板的完整代码：

static get template() {
    return html`
     
     <div>
        ${this.myBoolValue ? "true" : "false"}  // error, does not recognize "this.myBoolValue". 
   </div>

    `;

Answer 1

如果 myBoolValue 的默认值为 false，您可以像这样更改属性和模板（如果您想使用 conditional templates，则必须导入 @polymer/polymer/lib/elements/dom-if.js .)

static get properties() {
  return {
    myBoolValue: {
      type: Boolean,
      value: false
    }
  };
}
static get template() {
  return html`
    <p>[[myBoolValue]]</p>

    // OR conditional templates:
    <template is="dom-if" if="{{myBoolValue}}">
      true
    </template>
    <template is="dom-if" if="{{!myBoolValue}}">
      false
    </template>
  `;
}

如果您不能或不想设置默认值，请像这样更改您的代码并使用 computed property:

static get properties() {
  return {
    myBoolValue: {
      type: Boolean
    },
    computedBool: {
      type: String,
      computed: "_isTrue(myBoolValue)",
      value: false
    }
  };
}

static get template() {
  return html`
    <p>[[computedBool]]</p>

    <template is="dom-if" if="{{computedBool}}">
      true
    </template>
    <template is="dom-if" if="{{!computedBool}}">
      false
    </template>
  `;
}

_isTrue(a) {
  return a === true;
}

Polymer 3 中的条件渲染

Conditional rendering in Polymer 3

javascript

typescript

polymer

polymer-3.x