Vue.js3超初心者向け。静的cssと動的cssを共存させる簡単なサンプルコードで解説
8 回閲覧されました
みなさんこんにちは、jonioです。
今回は静的cssと動的cssを共存させる方法について簡単なサンプルコードで解説します。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
静的なcssと動的なcssを共存させる方法
静的なcssを適用する場合は下記の記述をします。
<template>
<div
class="page-background"
></div>
</template>これは普通だと思います。
これにJavaScriptを使って条件を満たした時に動的なcssの適用するには下記の記述をします。
<template>
<div
:class="['page-background', bgClass]"
></div>
</template>
<script setup>
import {ref, onMounted } from 'vue';
const bgClass = ref('bg-white');
const backgroundScroll = () => {
const y = window.scrollY;
if (y < 100) {
bgClass.value = 'bg-white';
} else if (y < 500) {
bgClass.value = 'bg-red';
} else if (y < 1000) {
bgClass.value = 'bg-blue';
} else {
bgClass.value = 'bg-green';
}
};
onMounted(() => {
window.addEventListener('scroll', backgroundScroll);
});
</script>3行目が静的なcssと動的なcssを共存させる時の書き方です。
「:class=”[‘静的なcss’, 動的なcss]”」と記述すればいいです。