[ Laravel & Vue.js ] 11.Video: Vue.js içerisinde “class" ve “style” binding hadisesi.



1 dakikalık okuma
April 18, 2019

Bu videoda:

  • v-bind:class içerisinde şartsal ifadelerin nasıl kullanıldığını,
  • v-bind:class kısayol kullanımı,

kısaca “v-bind:class” ı her yönüyle ele almaya çalıştım.

Buyrun videomuz da burada:


Video Özeti

Class ve Style Binding

Class ve Style Binding

“v-bind:class” ve “v-bind:style” kısayol kullanımı

"v-bind:" ifadesini : olarak temsil ettiğini düşünürsek kısayolları şu şekilde yapabiliriz:

v-bind:class -> :class

v-bind:style -> :style

“v-bind:class” kullanma yöntemleri

Class ve Style Binding nesne içinde

Class ve Style Binding dizi içinde

“v-bind:style” nam-ı diğer inline style kullanımı

Vue.js v-bind:style elementi içerisinde kullanılan nesnelere farklı davranmaktadır. Mesela aşağıdaki örneği inline style da yapabiliriz:

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Etiketler: