javascript - 在 polymer 3中切换Div

我试图通过单击按钮来显示和隐藏Polymer 3中的div。但是，当我控制台记录showhide boolean的值时，其显示未定义？我的代码如下

static get properties() {
    return {
      showNotification: Boolean
    };
  }

connectedCallback() {
    super.connectedCallback();
    this.showNotification = false;
}

<div class='notification-count' on-click='_showHideNotification'>
<div>4</div></div>
<div class="cards" hidden$='[[showNotification]]'></div>

_showHideNotification() {
    this.showNotification != this.showNotification;
    console.log(this.showNotification);
  }

最佳答案

为确保通知更改，您应该使用set方法，而不是直接分配给属性。因此，您的connectedCallback将为：

connectedCallback() {
    super.connectedCallback();
    this.set('showNotification', false);
}

并且在您的切换功能中只有一个未使用的比较，您甚至都没有尝试更改该值。因此，可能是：

_showHideNotification() {
    this.set('showNotification', !this.showNotification);
    console.log(this.showNotification);
}

我不知道您在这里做什么的完整逻辑，也许这不是问题，但是请记住，您正在调用属性showNotification，并且在值是true时隐藏了某些东西。因此，您可能要确保您不会反之亦然。