v-bind:style
v-bind:styleは、style属性を設定する手法になりま、複数のスタイルを適応できます。
※スタイルバインディング : style属性へのバインド
<要素名 v-bind:style=”{ プロパティ : 値 }”>
<要素名 :style=”{ プロパティ : 値 }”>※省略時
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind:styleについて</title>
</head>
<body>
<div id="app">
<div :style="{ backgroundColor : 'cornflowerblue', color : 'white' }">
こんにちは！
</div>
</div>
<script src="./js/style.js"></script>
</body>
</html>Vue.createApp({}).mount("#app");style属性の注意点
ハイフン区切りのプロパティ名は、クォートで区切るかキャメルケースで記述します。
<!-- どちらでも問題ない -->
<div :style="{ 'background-color' : 'cornflowerblue' }">
<div :style="{ backgroundColor : 'cornflowerblue' }">オブジェクト構文(データプロパティ指定)
バインドされたスタイルは、データプロパティからスタイルの値を指定も可能になります。
<要素名 v-bind:style=”{ プロパティ : データプロパティ名 }”>
<要素名 :style=”{ プロパティ : データプロパティ名 }”>※省略時
=========================================
data() {
return {
データプロパティ名 : プロパティの値;
}
};
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind:style(オブジェクト構文)</title>
</head>
<body>
<div id="app">
<div :style="{ backgroundColor: bgColor, color: color }">
こんにちは！
</div>
</div>
<script src="./js/style.js"></script>
</body>
</html>Vue.createApp({
data() {
return {
bgColor: "cornflowerblue",
color: "white",
};
},
}).mount("#app");配列構文
v-bind:styleでは、配列型式で複数のスタイルをオブジェクトで渡す事が可能になります。
<要素名 v-bind:style=”[ オブジェクト名 ]”>
<要素名 :style=”[ オブジェクト名 ]”> ※省略時
=========================================
return {
オブジェクト名 : {
プロパティ名 : 値
}
};
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind:style(配列構文)</title>
</head>
<body>
<div id="app">
<div :style="[ color, size ]">こんにちは！</div>
</div>
<script src="./js/style.js"></script>
</body>
</html>Vue.createApp({
data() {
return {
color: {
backgroundColor: "cornflowerblue",
color: "white",
},
size: {
fontSize: "1.2rem",
padding: "1rem",
},
};
},
}).mount("#app");style オブジェクト
スタイルをバインドする際に、タグ内にデザインをたくさん記述するのは視認性が悪くなるのでスタイルオブジェクトにスタイルを集約する方が視認性が良くなります。
<要素名 v-bind:style=”オブジェクト名”>
<要素名 :style=”オブジェクト名”> ※省略時
=========================================
data() {
return {
オブジェクト名 {
データプロパティ名 : プロパティの値;
}
};
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-bind:style(スタイルの集約)</title>
</head>
<body>
<div id="app">
<div :style="styleObject">こんにちは！</div>
</div>
<script src="./js/style.js"></script>
</body>
</html>Vue.createApp({
data() {
return {
styleObject: {
backgroundColor: "cornflowerblue",
color: "white",
fontSize: "1.2rem",
padding: "1rem",
},
};
},
}).mount("#app");