Vue.js CSS Class ve Inline (Satır İçi) Style Bindings

Özellikle bu yazı bağlamında, Vue 2.x¹ ve Vue 3.x² sayfasında yer alan örneklerin oldukça açıklayıcı olduğunu hatırlatmak isterim. Ben, bu yazı içerisinde yer alan örnekleri çeşitlilik oluşturabilmek amacıyla farklı ek konularla ilintili ele almaya çalışacağım.

CSS Class ve Inline Style Bindings

Class İşlemleri

Vue.js ile uygulama geliştirirken ihtiyaçlar doğrultusunda CSS yapılarını da olaylarla ilişkilendirerek oldukça kolay bir şekilde yönetebilirsiniz. Direktifler yazı serisi içerisinde v-bind direktifini birkaç örnekte bu amaçla kullanmıştık. Gelelim ilgili konunun detaylarına.

Öncelikle, Vue expression dahilinde string ifadelere ek olarak, diziler (array) ve nesneler (object) kullanılabilmekte. Hızlıca bir örnek işlem gerçekleştirelim ve object içeriğini v-bind:class ile kullanalım.

<div id="app">
 <div v-cloak v-bind:class="status" v-show="status" v-text="message"></div>
 <!-- ya da v-bind:class yerine :class -->
 <div v-cloak :class="status" v-show="status" v-text="message"></div>
</div>

Vue instance içeriğimiz de şöyle olsun:

// Vue v2.x
var app = new Vue({
 el: '#app',
 data: {
  status: true,
  error: false,
  message: 'Welcome',
 }
});

// Vue v3.x
const app = Vue.createApp({
  data() {
    return {
      status: true,
      error: false,
      message: 'Welcome'
    }
  }
}).mount('#app');

status içeriğinin true | false durumuna göre v-show ile message içeriğini göstermekteyiz. Kaynak kodlara baktığınızda <div class>Welcome</div> şeklinde bir ifade göreceksiniz. Çünkü, daha class olarak atadığımız bir değer bulunmamakta. O halde düzenlemelerimizi yapalım ve ilgili HTML etiketini şu şekilde güncelleyelim.

Object Syntax

<div v-bind:class="{ active: status }" v-show="status" v-text="message"></div>

Tekrar kaynak kodlara baktığınızda class değerinin active olduğunu görebilirsiniz. Bir ekleme daha yapıp konuyu açıklayacağım.

<div v-cloak class="ui" v-bind:class="{ active: status, 'text-danger': error }" v-show="status" v-text="message"></div>

Console üzerinden app.error ve app.status için true değerini atadığınızda render sonucunda div etiketinin ui active text-danger class’larını bir arada aldığını görebilirsiniz. Bunun nedeni :class içerisinde tanımlanan ifadenin true alması durumunda, Vue’nun ilgili ifadeyi eğer var ise önceki class içeriklerini de dahil ederek bulunduğu elemente atıyor oluşu.

Elbette bu işlem inline (satır içi) olmak zorunda değil. Yukarıdaki örneği yeniden ele alalım:

<div v-bind:class="classObject"></div>

classObject ile data içeriğinde tanımladığımız tüm değerleri artık class olarak, yine true | false değerlerine uygun bir şekilde kullanabileceğiz.

message: 'Welcome',
classObject: {
  status: true,
  error: false
}

Class object aynı zamanda computed property ile de edinilebilir.

computed: {
 classObject: function () {
  return {
   active: this.status && !this.error,
   error: this.error && this.error.type === 'fatal'
  }
 }
}

Array Syntax

<div v-cloak class="ui" v-bind:class="[status, color]" v-show="status" v-text="message"></div>

Class ve style tanımınında array (dizi) işlemleri de yapabildiğimizi belirtmiştim. Object syntax başlığı altındaki örneği yeniden ele alalım.

status: 'active',
color: 'red',
message: 'Welcome',

Bir class içeriğini koşullu olarak değiştirelim:

<div v-cloak class="ui" v-bind:class="[status ? color : '', error]" v-show="status" v-text="message"></div>

Birden fazla koşul söz konusu ise örneğimizi şu şekilde düzenleyebiliriz:

<div v-cloak class="ui" v-bind:class="[{ active: status }, error]" v-show="status" v-text="message"></div>

Inline Style İşlemleri

<div v-bind:style="{ color: status, fontWeight: fontWeight }" v-text="message" v-show="status"></div>

status: 'active',
fontColor: 'red',
fontWeight: 'bold',
message: 'Welcome',

Unutmadan, class ve inline style birlikte kullanılabilir.

<div class="ui" v-bind:class="status" v-bind:style="{ color: font.fontColor, fontWeight: font.fontWeight }" v-text="message" v-show="status"></div>

Style nesnesini doğrudan kullanabiliriz:

<div class="ui" v-bind:class="status" v-bind:style="styleObject" v-text="message" v-show="status"></div>

styleObject: {
  fontColor: 'red',
  fontWeight: 'bold',
}

Son örnekte de çoklu style object dahil edelim.

<div class="ui" v-bind:class="status" v-bind:style="[styleObject, newStyleObject]" v-text="message" v-show="status"></div>

styleObject: {
  fontColor: 'red',
  fontWeight: 'bold',
},
newStyleObject: {
  fontColor: 'blue',
  fontWeight: 'bold',
}

Çoklu kullanımda işlemler soldan sağa doğru uygulanacaktır. Bu nedenle son tanımlanan class ve/veya style bir öncekini ezecektir.