【Vue】v-bind（:class, :style）🚧作成中

v-bindの概要

• 使い方
  • HTMLの属性にプロパティ（props。JavaScriptの変数）を割り当てる時に使う
    ver.2 プロパティ — Vue.js
    ver.3 props | Vue.js
    （ちなみにReactだと、全体をJSXで書いて、属性に「波括弧で囲ったJavaScriptの変数や式」を渡す。【React】JSXの書き方 ）
  • class と style には特別な拡張機能がある（後述）
    ver.2 クラスとスタイルのバインディング — Vue.js
    ver.3 クラスとスタイルのバインディング | Vue.js
• 書き方
  • 例： v-bind:href='hoge'
  • 省略記法：↑を :href='hoge' と書ける
    ver.2 テンプレート構文 — Vue.js
    ver.3 テンプレート構文 | Vue.js

:class の拡張機能

:class（v-bind:class の省略記法）では、オブジェクトを渡して CSS クラスを動的に切り替えることができる

classの書き方例①

• template

<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

• script

// ver.2の場合
data: {
  isActive: true,
  hasError: false
}

// ver.3の場合。refはVueのAPI（参考サイト参照）
const isActive = ref(true)
const hasError = ref(false)

• レンダリング結果

<div class="static active"></div>

classの書き方例②：オブジェクトを渡す書き方

レンダリング結果は、書き方①と同じになる

• template（slim形式での例。( )は視認性UP目的で、無くても良い*1）

.static(:class="classObject")

• script

// ver.2の場合
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

// ver.3の場合。reactiveはVueのAPI（参考サイト参照）
const classObject = reactive({
  active: true,
  'text-danger': false
})

• scriptを以下のように書く事もできる

// ver.2の場合
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

// ver.3の場合。refはVueのAPI（参考サイト参照）
const isActive = ref(true)
const error = ref(null)

// computedはVueのAPI（参考サイト参照）
const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

:style の拡張機能 🚧作成中

🚧作成中

参考

ver.2 API — Vue.js
ver.3 ビルトインのディレクティブ | Vue.js
ver.3 ref() < Reactivity API: Core | Vue.js
ver.3 reactive() < Reactivity API: Core | Vue.js
ver.3 computed() < Reactivity API: Core | Vue.js

*1:属性の囲み（{...}、(...)、[...]） < 【Rails, gem】slim