クラスのデータバインディングの基本を知る
-
v-bind:classに動的にクラスを切り替えるオブジェクトを渡すことをやってみる
<div id="app">
<p>Hello <span v-bind:class="{ large: isLarge }">Vue.js!</span></p>
</div>
.large{
font-size: 36px;
}
const app = Vue.createApp({
data: () => ({
isLarge: true
})
})
app.mount('#app')
-
isLarge: trueによってクラスが適用され文字が大きくなる
const app = Vue.createApp({
data: () => ({
isLarge: false
})
})
app.mount('#app')
-
isLarge: falseでクラスが適用されなくなる
複数のクラスを動的に切り替える
- v-bind:classに対してはクラスは複数指定することができる
<div id="app">
<p>Hello <span v-bind:class="{ large: isLarge, 'text-danger': hasError }">Vue.js!</span></p>
</div>
.large{
font-size: 36px;
}
.text-danger{
color: red;
}
const app = Vue.createApp({
data: () => ({
isLarge: false
hasError: true
})
})
app.mount('#app')
-
<span v-bind:class="{ large: isLarge, 'text-danger': hasError }">Vue.js!</span>
→複数クラス指定可能 - ※
'text-danger': hasError
→クラス名にハイフンを含む場合はシングルクォートで囲う必要あり
プレーンなクラス属性と共存させる
- v-bind:classディレクティブはプレーンなクラス属性と組み合わせることができる
<div id="app">
<p>Hello
<span class="bg-gray text-blue"
v-bind:class="{ large: isLarge, 'text-danger': hasError }">Vue.js!</span></p>
</div>
.large{
font-size: 36px;
}
.text-danger{
color: red;
}
.bg-gray{
background-color: gray;
}
.text-blue{
color: blue;
}
const app = Vue.createApp({
data: () => ({
isLarge: true,
hasError: true
})
})
app.mount('#app')
- spanに直接指定したスタイルとv-bindで指定したスタイルがどちらも設定されている
- 赤文字に関しては競合しているので後ろに記述した青文字が反映されている
配列構文によるクラスのデータバインディングをする
- v-bind;classにクラスのリストを適用する配列を渡すことができる
<div id="app">
<p>Hello! <span v-bind:class="largeClass">Vue.js!</span></p>
<p>Hello! <span v-bind:class="[largeClass, dangerClass]">Vue.js!</span></p>
</div>
.large{
font-size: 36px;
}
.text-danger{
color: red;
}
.bg-gray{
background-color: gray;
}
.text-blue{
color: blue;
}
const app = Vue.createApp({
data: () => ({
largeClass: 'large',
dangerClass: 'text-danger'
})
})
app.mount('#app')
-
<span v-bind:class="[largeClass, dangerClass]">
←配列構文のデータバインディング - 配列構文により複数のクラスをバインディングすることができる
オブジェクトデータを利用する
- dataオプションにオブジェクトを定義してv-bind;classに渡すことができる
<div id="app">
<p>Hello <span v-bind:class="classObject">Vue.js!</span></p>
</div>
.large{
font-size: 36px;
}
.text-danger{
color: red;
}
.bg-gray{
background-color: gray;
}
.text-blue{
color: blue;
}
const app = Vue.createApp({
data: () => ({
classObject:{
large: true,
'text-danger': true
}
})
})
app.mount('#app')
クラスの条件に三項演算子を使う
condition ? expr1 : expr2- conditionがtrueならexpr1を実行
- conditionがfalseならexpr2を実行
例
<div id="app">
<p>Hello <span v-bind:class="isLarge ? largeClass: ''">Vue.js!</span></p>
</div>
.large{
font-size: 36px;
}
.text-danger{
color: red;
}
.bg-gray{
background-color: gray;
}
const app = Vue.createApp({
data: () => ({
largeClass:{
'large': true,
'bg-gray': true
},
dangerClass:{
'text-danger': true
},
isLarge: true
})
})
app.mount('#app')
- jsのdataオプション内、
isLarge: trueとなっているのでhtml側での三項演算子がtrueとなる
→<span v-bind:class="isLarge ? largeClass: ''">Vue.js!</span> - trueで実行される
largeClass内のlargeとbg-grayのスタイルが効いている状態
配列にしてカンマ区切りでオブジェクト名を渡す方法
<div id="app">
<p>Hello <span v-bind:class="[isLarge ? largeClass: '', dangerClass]">Vue.js!</span></p>
</div>
.large{
font-size: 36px;
}
.text-danger{
color: red;
}
.bg-gray{
background-color: gray;
}
const app = Vue.createApp({
data: () => ({
largeClass:{
'large': true,
'bg-gray': true
},
dangerClass:{
'text-danger': true
},
isLarge: true
})
})
app.mount('#app')
- htmlのみ変更
<span v-bind:class="[isLarge ? largeClass: '', dangerClass]">Vue.js!</span>-
dangerClassは常に反映と、三項演算子が2つ入った配列になっている
インラインスタイルのデータバインディングを使う
インラインスタイルとは
<p style="color: red;">Hello</p>- ↑↑↑HTMLで直書きすると上記のイメージ
<div id="app">
<p>Hello <span v-bind:style="{ color: color, fontSize: fontSize + 'px'}">Vue.js</span></p>
</div>
const app = Vue.createApp({
data: () => ({
color: 'blue',
fontSize: 36
})
})
app.mount('#app')
インラインスタイルのデータバインディングにオブジェクトデータを使う
<div id="app">
<p>Hello <span v-bind:style="styleObject">Vue.js</span></p>
</div>
const app = Vue.createApp({
data: () => ({
styleObject: {
color: 'blue',
fontSize: '48px'
}
})
})
app.mount('#app')
