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」がバインドされていることがわかります。