今回はVue.jsの@click(v-on:click)とmethodsを使用してボタン内の文字を書き換えるで作成したボタンを画像のように押下されたらボタンの色を変更するためにクラスバインディングを使用していきたいと思います。
C:/npm_sample/src/App.vue
<template>
<div id="app">
<!-- クラスバインディングを使用して、isOrangeがtrueの場合に"orangeButton"クラスを適用する -->
<button @click="changeMessage" :class="{'messageButton': true, 'orangeButton': isOrange}">{{ message }}</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'Hello',
isOrange: false, // 初期状態ではオレンジ色ではない
}
},
methods: {
changeMessage() {
if (this.message === 'Hello') {
this.message = 'Updated message';
this.isOrange = true; // ボタンをオレンジ色にする
} else {
this.message = 'Hello';
this.isOrange = false; // ボタンの色を元に戻す
}
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex; /* Flexboxを使用してレイアウトを調整 */
justify-content: center; /* 横方向に中央寄せ */
align-items: center; /* 縦方向にも中央寄せ */
height: 100vh; /* 親要素の高さをビューポートの高さと同じにする */
}
.messageButton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 8px;
}
.orangeButton {
background-color: orange; /* オレンジ色を指定 */
}
</style>
<template> セクション
この部分は、アプリケーションのHTMLマークアップを定義します。<template>タグ内に記述されたHTMLは、Vueインスタンスによって管理されます。
<div id="app">...</div>: アプリケーションのルート要素です。Vueインスタンスがこの要素内のDOMを制御します。<button @click="changeMessage" :class="{'messageButton': true, 'orangeButton': isOrange}">{{ message }}</button>: ユーザーがクリックするボタンです。@clickはVueのイベントリスナディレクティブで、changeMessageメソッドがクリック時に呼び出されます。:classは、クラスバインディングを示し、isOrangeの値に応じてorangeButtonクラスを動的に適用します。{{ message }}は、データプロパティmessageの値を表示します。
<script> セクション
このセクションは、アプリケーションのロジックを含むJavaScriptです。
export default { ... }: Vueコンポーネントを定義します。コンポーネントは、Vueアプリケーションの構成要素です。data() { ... }: コンポーネントのデータプロパティを定義します。ここではmessageとisOrangeを初期化しています。messageはボタンに表示されるテキスト、isOrangeはボタンの色を制御するフラグです。methods: { ... }: コンポーネントで使用するメソッドを定義します。changeMessageメソッドは、ボタンがクリックされるたびにmessageとisOrangeの値を切り替えます。
<style> セクション
ここでは、アプリケーションのスタイルをCSSで定義します。
#app { ... }: アプリケーションのルート要素にスタイルを適用します。.messageButton { ... }:messageButtonクラスにスタイルを適用します。このクラスは、ボタンに初期スタイルを与えます。.orangeButton { ... }:orangeButtonクラスにスタイルを適用します。このクラスは、isOrangeがtrueの場合にボタンをオレンジ色にします。
動作の流れ
- ページが読み込まれると、Vueインスタンスが作成され、
dataで定義された初期状態が設定されます。 - ユーザーがボタンをクリックすると、
@clickディレクティブによってchangeMessageメソッドが呼び出されます。 changeMessageメソッドは、messageの値を更新し、isOrangeのブール値を切り替えてボタンの色を変更します。- ボタンの
:classバインディングがisOrangeの値に基づいて評価され、クラスが動的に更新されます。これにより、ボタンの背景色が変わります。 {{ message }}バインディングによって、ボタンのラベルも動的に更新されます。
コメント