vueデータバインド-ダイナミックスタイル

vueデータバインド-ダイナミックスタイル
動的class名バインドのいくつかの方法1.オブジェクトモード

new Vue({
  el: '#root',
  template: `
:class="{active: isActive">
`,
  data () {
    return {
      isActive: true
    }
  }
})

配列内オブジェクト

  template: ` 
:class="[{active: isActive}]">
`

三項演算子

  template: `
:class="isActive ? 'active' : '' ">
`

配列の3つの演算子

  template: `
:class="[isActive ? 'active' : '']">
`

複数のスタイルスタイルをバインドstyle

new Vue({
  el: '#root',
  template: `
:style="[style1, style2]">
`,
  data () {
    return {
      style1: {
        color: 'blue'
      },
      style2: {
        color: 'black'
      }
    }
  }
})