これをクリックするとボタンの色を変更できますが、クリックしたときのテキストの変更方法は？Aurelia.jsボタンを押したときのテキスト値の変更
クリックから へ変更テキストは、HTML
をクリック：
<button type="button" class="btn ${clicked ? 'btn-danger' : 'btn-primary'}" click.trigger="handleClick()">Click</button>
JS ...
clicked = false;
handleClick(){
this.clicked = !this.clicked; // toggle clicked true/false
return true; // only needed if you want to cancel preventDefault()
}
私はSをしようとするだろう
<button type="button" class="btn ${clicked ? 'btn-danger' : 'btn-primary'}" click.trigger="handleClick()">
${clicked ? 'Clicked' : 'Click'}
</button>
こと、または変数にボタンのテキストを設定し、機能でそれを変更する次のいずれかを使用すると、クラスで行ったボタンのテキストとAME。
ref属性を使用して要素にアクセスできます。可能であれば、.triggerの代わりに.delegateを使用することもお勧めします。詳細はhereをご覧ください。
はここに例を示しますhttps://gist.run?id=99524bb7fee9d0b7272741477c1fffb8
app.html
<template>
<button ref="btn" click.delegate="onClick(btn)">Click Me!</button>
</template>
app.js
export class App {
message = 'Hello World!';
onClick(button) {
button.innerText = 'Clicked!'
}
}
index.htmlを
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>