html - 尽管我们使用显示 css 属性，但如何使用 [hidden] 属性隐藏 DOM 元素？

Question

    public hide(){
        this.show = !this.show;
    }

    .h1{
         display: flex;
     }

    <button (click)="hide()">Hide/Show</button>

      <h1 class="h1" [hidden]="!show">

        Hide me!
      </h1>

这是问题所在。我设置了一个隐藏 DOM 元素的功能。所以如果我点击按钮文本将被隐藏。没关系。但问题是display: flex;如果我使用这个 CSS 属性隐藏不起作用，我想使用它。如果我删除displaycss 属性肯定会隐藏文本

1. 我想使用隐藏文本[hidden]=""
2. 我想用display:flex

使用这两个我如何隐藏文本，有什么办法吗？如果不是为什么？

标签： htmlcssangular

Answer 1

在你的 CSS 中：

h1 {
  display: flex;
}

h1[hidden] {
  display: none;
}