コミートム合同会社

コミートム合同会社

Vue クラスのバインディング

Vue.js This article is about class binding in Vue.js. It shows how to change styles based on a variable. The code uses array syntax and ternary operators to make it easy to understand.
by JanitorSep 13, 2023
Vueの機能の、クラスのバインディングに関する記事です。変数に応じてスタイルを変更します。配列構文と三項演算子式を使うと見通しがしやすく、わかりやすいと思います。
Vueの機能の、クラスのバインディングに関する記事です。変数に応じてスタイルを変更します。配列構文と三項演算子式を使うと見通しがしやすく、わかりやすいと思います。

Jump Links

1. pagesフォルダに「bindClassStudy」フォルダを作成
2. 動作確認
1. pagesフォルダに「bindClassStudy」フォルダを作成
1. pagesフォルダに「bindClassStudy」フォルダを作成
フォルダ名はなんでも構いません。今回は「bindClassStudy」としています。直下にindex.vueを作成し、下記のソースコードをコピーアンドペーストすると動作を確認できます。
フォルダ名はなんでも構いません。今回は「bindClassStudy」としています。直下にindex.vueを作成し、下記のソースコードをコピーアンドペーストすると動作を確認できます。
pages/bindClassStudy/index.vue <script setup> import { reactive } from 'vue'; var classSelect = reactive( { value: 0 } ); var increment = () => { classSelect.value = classSelect.value + 1; if( classSelect.value == 4 ) classSelect.value = 0; } </script> <template> <VContainer> <div class="mb-3" :class="[ classSelect.value == 0 ? 'bgWhite' : '', classSelect.value == 1 ? 'bgBlack text-white' : '', classSelect.value == 2 ? 'underLined' : '', classSelect.value == 3 ? 'bgBlack text-white underLinedWhite' : '', ]"> class bind test. </div> <VBtn @click="increment()"> style change </VBtn> </VContainer> </template> <style scoped> .bgWhite{ background-color: white; } .bgBlack{ background-color: black; } .underLined{ text-decoration: underline; } .underLinedWhite{ text-decoration: underline; text-decoration-color: white; } </style>
pages/bindClassStudy/index.vue <script setup> import { reactive } from 'vue'; var classSelect = reactive( { value: 0 } ); var increment = () => { classSelect.value = classSelect.value + 1; if( classSelect.value == 4 ) classSelect.value = 0; } </script> <template> <VContainer> <div class="mb-3" :class="[ classSelect.value == 0 ? 'bgWhite' : '', classSelect.value == 1 ? 'bgBlack text-white' : '', classSelect.value == 2 ? 'underLined' : '', classSelect.value == 3 ? 'bgBlack text-white underLinedWhite' : '', ]"> class bind test. </div> <VBtn @click="increment()"> style change </VBtn> </VContainer> </template> <style scoped> .bgWhite{ background-color: white; } .bgBlack{ background-color: black; } .underLined{ text-decoration: underline; } .underLinedWhite{ text-decoration: underline; text-decoration-color: white; } </style>
上のスクリプトの説明です。 script setupタグの中で、classSelectという変数とclassSelectをプラス1する関数を作成しています。 templateタグの中では、classSelectという変数の値に応じてクラスを変更するように、配列構文の中で、三項演算子を使って並べています。表示される文字列は、"class bind test."という文字列です。また、template内でボタンを設置して、ボタンが押されたらclassSelectをプラス1する関数を呼び出しています。 styleタグ内では、templateタグでバインドするクラスの設定をしています。 参考にさせて頂いたウェブサイトURL https://v2.ja.vuejs.org/v2/guide/class-and-style
上のスクリプトの説明です。 script setupタグの中で、classSelectという変数とclassSelectをプラス1する関数を作成しています。 templateタグの中では、classSelectという変数の値に応じてクラスを変更するように、配列構文の中で、三項演算子を使って並べています。表示される文字列は、"class bind test."という文字列です。また、template内でボタンを設置して、ボタンが押されたらclassSelectをプラス1する関数を呼び出しています。 styleタグ内では、templateタグでバインドするクラスの設定をしています。 参考にさせて頂いたウェブサイトURL https://v2.ja.vuejs.org/v2/guide/class-and-style
2. 動作確認
2. 動作確認
ボタンを押すと"class bind test."という文字列のスタイルが変更されます。下の図の場合は、ボタンを押してclassSelectという変数が3になったときの表示です。背景が黒、文字色が白、アンダーラインが設定されていて、その色が白になっていますので、「bgBlack text-white underLinedWhite」がバインドされていることがわかります。
ボタンを押すと"class bind test."という文字列のスタイルが変更されます。下の図の場合は、ボタンを押してclassSelectという変数が3になったときの表示です。背景が黒、文字色が白、アンダーラインが設定されていて、その色が白になっていますので、「bgBlack text-white underLinedWhite」がバインドされていることがわかります。

Vue クラスのバインディング

Vue.js This article is about class binding in Vue.js. It shows how to change styles based on a variable. The code uses array syntax and ternary operators to make it easy to understand.
by JanitorSep 13, 2023
Vueの機能の、クラスのバインディングに関する記事です。変数に応じてスタイルを変更します。配列構文と三項演算子式を使うと見通しがしやすく、わかりやすいと思います。
Vueの機能の、クラスのバインディングに関する記事です。変数に応じてスタイルを変更します。配列構文と三項演算子式を使うと見通しがしやすく、わかりやすいと思います。

Jump Links

1. pagesフォルダに「bindClassStudy」フォルダを作成
2. 動作確認
1. pagesフォルダに「bindClassStudy」フォルダを作成
1. pagesフォルダに「bindClassStudy」フォルダを作成
フォルダ名はなんでも構いません。今回は「bindClassStudy」としています。直下にindex.vueを作成し、下記のソースコードをコピーアンドペーストすると動作を確認できます。
フォルダ名はなんでも構いません。今回は「bindClassStudy」としています。直下にindex.vueを作成し、下記のソースコードをコピーアンドペーストすると動作を確認できます。
pages/bindClassStudy/index.vue <script setup> import { reactive } from 'vue'; var classSelect = reactive( { value: 0 } ); var increment = () => { classSelect.value = classSelect.value + 1; if( classSelect.value == 4 ) classSelect.value = 0; } </script> <template> <VContainer> <div class="mb-3" :class="[ classSelect.value == 0 ? 'bgWhite' : '', classSelect.value == 1 ? 'bgBlack text-white' : '', classSelect.value == 2 ? 'underLined' : '', classSelect.value == 3 ? 'bgBlack text-white underLinedWhite' : '', ]"> class bind test. </div> <VBtn @click="increment()"> style change </VBtn> </VContainer> </template> <style scoped> .bgWhite{ background-color: white; } .bgBlack{ background-color: black; } .underLined{ text-decoration: underline; } .underLinedWhite{ text-decoration: underline; text-decoration-color: white; } </style>
pages/bindClassStudy/index.vue <script setup> import { reactive } from 'vue'; var classSelect = reactive( { value: 0 } ); var increment = () => { classSelect.value = classSelect.value + 1; if( classSelect.value == 4 ) classSelect.value = 0; } </script> <template> <VContainer> <div class="mb-3" :class="[ classSelect.value == 0 ? 'bgWhite' : '', classSelect.value == 1 ? 'bgBlack text-white' : '', classSelect.value == 2 ? 'underLined' : '', classSelect.value == 3 ? 'bgBlack text-white underLinedWhite' : '', ]"> class bind test. </div> <VBtn @click="increment()"> style change </VBtn> </VContainer> </template> <style scoped> .bgWhite{ background-color: white; } .bgBlack{ background-color: black; } .underLined{ text-decoration: underline; } .underLinedWhite{ text-decoration: underline; text-decoration-color: white; } </style>
上のスクリプトの説明です。 script setupタグの中で、classSelectという変数とclassSelectをプラス1する関数を作成しています。 templateタグの中では、classSelectという変数の値に応じてクラスを変更するように、配列構文の中で、三項演算子を使って並べています。表示される文字列は、"class bind test."という文字列です。また、template内でボタンを設置して、ボタンが押されたらclassSelectをプラス1する関数を呼び出しています。 styleタグ内では、templateタグでバインドするクラスの設定をしています。 参考にさせて頂いたウェブサイトURL https://v2.ja.vuejs.org/v2/guide/class-and-style
上のスクリプトの説明です。 script setupタグの中で、classSelectという変数とclassSelectをプラス1する関数を作成しています。 templateタグの中では、classSelectという変数の値に応じてクラスを変更するように、配列構文の中で、三項演算子を使って並べています。表示される文字列は、"class bind test."という文字列です。また、template内でボタンを設置して、ボタンが押されたらclassSelectをプラス1する関数を呼び出しています。 styleタグ内では、templateタグでバインドするクラスの設定をしています。 参考にさせて頂いたウェブサイトURL https://v2.ja.vuejs.org/v2/guide/class-and-style
2. 動作確認
2. 動作確認
ボタンを押すと"class bind test."という文字列のスタイルが変更されます。下の図の場合は、ボタンを押してclassSelectという変数が3になったときの表示です。背景が黒、文字色が白、アンダーラインが設定されていて、その色が白になっていますので、「bgBlack text-white underLinedWhite」がバインドされていることがわかります。
ボタンを押すと"class bind test."という文字列のスタイルが変更されます。下の図の場合は、ボタンを押してclassSelectという変数が3になったときの表示です。背景が黒、文字色が白、アンダーラインが設定されていて、その色が白になっていますので、「bgBlack text-white underLinedWhite」がバインドされていることがわかります。
© 2023 - Comytom LLC