クラスとスタイルのバインディング
- 今日のお題はこちらです。
- https://jp.vuejs.org/v2/guide/class-and-style.html
HTML クラスのバインディング
オブジェクト構文
- App.vue
<template lang="pug">
#app
div.static(:class="{ active: isActive, 'text-danger': !isActive }") see class
button(@click="isActive=!isActive") ClassChangeToggle
div(:class="classObject") see class
div(:class="classObjectComputed") see class
button(@click="toggleMethod") ClassChangeToggle
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
isActive: true,
error: false,
classObject: {
active: true,
'text-danger': false
}
}
},
computed: {
classObjectComputed () {
return {
active: this.isActive && !this.error,
'text-danger': this.error
}
}
},
methods: {
toggleMethod () {
this.classObject.active = !this.classObject.active,
this.classObject['text-danger'] = !this.classObject['text-danger']
this.error = !this.error
}
}
}
</script>
- これだけでも、十分いろんなことができそうです。
- 簡単なものは、テンプレートに書く。
- ゴチャゴチャしたら、data側に置くまたは、computedでclassを管理する。
- 細かい条件が必要なら、computedになりますね。
配列構文
- App.vue
<template lang="pug">
#app
div(v-bind:class="[activeClass, errorClass]") Array
div(:class="[isActive ? activeClass : errorClass]") array ３項演算子
div(:class="[{ active: isActive}, isActive ? '' : errorClass]")
button(@click="isActive = !isActive") Toggle Button
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
isActive: true,
activeClass: 'active primary-color bg-md-12',
errorClass: 'text-danger'
}
},
methods: {
},
computed: {
}
}
</script>
- 最初、配列にしてなにが便利なのかと思いましたが、長いclass名をつけているときなどにもつかえます。
- ３項演算子で一気に変えれますね、尚切り替える場合、配列要素が必要です。
- 書き方としては、外を配列でくるんで、中をオブジェクトで書けば両方対応できます。
- class指定を、object形式にするのは、jsらしいですが、最初は、class名とキーと値がごっちゃになりややこしいです。（笑）
コンポーネントにおいて
- App.vue
<template lang="pug">
#app
my-component
my-component.baz.boo
my-component(:class="{active: isActive}")
</template>
<script>
import Vue from 'vue'
Vue.component('my-component', {
template: `<p v-bind:class="{componentActive: isActiveComponent}" class="foo bar" > component p </p>`,
data: () => ({
isActiveComponent: true
})
})
export default {
name: 'app',
data () {
return {
isActive: true
}
},
methods: {
},
computed: {
}
}
</script>
- コンポーネントは、最初使いませんので、飛ばしてもいいようにも思います。
- コンポーネントに置いたclass属性がどうなるかの説明です。
- コンポーネント側に書いてある、class名は通常上書きされず、後から追加した分と合わせて表示されるみたいです。
- コンポーネントに書くclass属性ですが、書く場所によりdataプロパティが違うので、違いの把握をしておいてください。
インラインスタイル
オブジェクト構文
- App.vue
<template lang="pug">
#app
div(:style="{ color: activeColor, fontSize: fontSize + 'px'}") Style
div(:style="styleObject") StyleObject
div(:style="styleComputed") styleComputed
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
activeColor: 'blue',
fontSize: '30',
styleObject: {
color: 'red',
fontSize: '20px'
}
}
},
methods: {
},
computed: {
styleComputed () {
return {
color: this.activeColor,
fontSize: this.fontSize + 'px'
}
}
}
}
</script>
- css styleもオブジェクトで書きます。
- ケバブケース、キャメルケースお好みで書けるみたいです、ここではJSで書きやすいキャメルで書くことにします。
- styleもテンプレート、dataプロパティ、computedにお好みでおけます。
- 最初サブ扱いと思っていたのですが、activeに切り替える要素は、ここがメインなのかもしれないですね。
配列構文
- App.vue
<template lang="pug">
#app
div(:style="[baseStyles, overridingStyles]") ArrayClass
</template>
<script>
import Vue from 'vue'
export default {
name: 'app',
data () {
return {
activeColor: 'blue',
fontSize: '30',
baseStyles: {
color: 'red',
fontSize: '20px',
fontFamily: 'Arial'
},
overridingStyles: {
color: 'blue',
fontSize: '30px',
fontWeight: 'bold',
}
}
},
methods: {
},
computed: {
}
}
</script>
- こちらも、配列がつかえるみたいです、この場合は基本スタイルと上書きスタイルがマージされて適用されます。
自動プリフィックス
- App.vue
<template lang="pug">
#App
div(style="user-select: none") auto prefix
</template>
<script>
export default {
name: 'app',
data () {
return {
}
},
computed: {
}
}
</script>
- 自動プリフィックス搭載済みみたいです。 たしかに現在のchromeでは、prefixついていませんが、safariで見ると、-webkit- がつけられているのがわかります。
- これは、safariもupdateされると、見れなくなると思います。
複数の値
- App.vue
<template lang="pug">
#App
div(:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }") Vue 2.3 over support
</template>
-
対応しているのを選んで使用してくれるということでしょうか。
-
今回は、これで終了です。 次回は、条件付きレンダリングです。