Aurelia.js单击后更改按钮颜色或类

Question

Aurelia.js点击后更改按钮颜色或类别。

如何用Aurelia做到这一点？点击此按钮后，从主要更改为危险？

谢谢。

HTML：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>

Answer 1

您需要设置类绑定和点击绑定。

绑定：
http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics

基本示例：

//view.html
<button type="button" class="btn ${clicked ? 'btn-danger' : 'btn-primary'}" click.trigger="handleClick()">Click</button>

//view.js
...
  clicked = false;

  handleClick(){
    this.clicked = !this.clicked; // toggle clicked true/false
    return true; // only needed if you want to cancel preventDefault()
  }

如果需要，可以通过直接绑定样式来获得类似的结果。