Sınıf ve Stil Bağlamaları ​

Veri bağlamada yaygın bir ihtiyaç, bir öğenin sınıf listesini ve satır içi stillerini yönetmektir. Hem class hem de style birer öznitelik olduğu için, tıpkı diğer özniteliklerde olduğu gibi bunlara da dinamik olarak string değeri atamak için v-bind kullanabiliriz. Ancak, bu değerleri string birleştirme kullanarak oluşturmaya çalışmak zahmetli ve hataya açık olabilir. Bu nedenle, Vue class ve style bağlamalarında v-bind kullanımında özel iyileştirmeler sağlar. Stringlere ek olarak, bu ifadeler nesne veya dizi olarak da değerlendirilebilir.

HTML Sınıflarını Bağlama ​

Nesnelere Bağlama ​

Sınıfları dinamik olarak açıp kapatmak için :class'a (v-bind:class kısaltması) bir nesne aktarabiliriz:

<div :class="{ active: isActive }"></div>

Yukarıdaki söz dizimi, active sınıfının varlığının isActive veri özelliğinin doğruluk değerine göre belirleneceği anlamına gelir.

Nesneye daha fazla alan ekleyerek birden fazla sınıfın açılıp kapanmasını sağlayabilirsiniz. Ayrıca :class yönergesi, düz class özniteliği ile bir arada bulunabilir. Aşağıdaki durum:

const isActive = ref(true)
const hasError = ref(false)

data() {
  return {
    isActive: true,
    hasError: false
  }
}

Ve aşağıdaki şablon göz önüne alındığında:

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

Şu çıktıyı üretecektir:

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

isActive veya hasError değiştiğinde, sınıf listesi buna göre güncellenecektir. Örneğin, hasError true olursa sınıf listesi "static active text-danger" olacaktır.

Bağlanan nesnenin satır içi olması gerekmez:

const classObject = reactive({
  active: true,
  'text-danger': false
})

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

<div :class="classObject"></div>

Yukarıdaki örnek, şu çıktıyı üretecektir:

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

Ayrıca bir nesne döndüren hesaplanmış özelliğe (computed property) de bağlama yapabiliriz. Bu yaygın ve güçlü bir kalıptır:

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="classObject"></div>

Dizilere Bağlama ​

Bir sınıf listesi uygulamak için :class özniteliğini bir diziye bağlayabiliriz:

const activeClass = ref('active')
const errorClass = ref('text-danger')

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

<div :class="[activeClass, errorClass]"></div>

Yukarıdaki örnek, şu çıktıyı üretecektir:

<div class="active text-danger"></div>

Listedeki bir sınıfı koşullu olarak açıp kapatmak isterseniz, bunu bir üçlü ifadeyle yapabilirsiniz:

<div :class="[isActive ? activeClass : '', errorClass]"></div>

Bu errorClass'ı her zaman uygulayacak, ancak activeClass yalnızca isActive doğru değerli (truthy) olduğunda uygulanacaktır.

Ancak birden fazla koşullu sınıfınız olduğunda bu biraz karmaşık hale gelebilir. Bu nedenle, dizi söz dizimi içinde nesne söz dizimi kullanmak da mümkündür:

<div :class="[{ [activeClass]: isActive }, errorClass]"></div>

Bileşenlerle Kullanımı ​

Bu bölüm Bileşenler hakkında bilgi sahibi olduğunuzu varsayar. Dilerseniz bu bölümü atlayıp daha sonra geri dönebilirsiniz.

Bileşen tek bir kök öğeden oluşuyorsa, kullanılan class öznitelikleri bu kök öğeye aktarılır ve halihazırda var olan sınıflarla birleştirilir.

Örneğin, aşağıdaki şablona sahip MyComponent adında bir bileşenimiz olduğunu varsayalım:

<!-- alt bileşen şablonu -->
<p class="foo bar">Hi!</p>

Ardından bileşeni kullanırken bazı sınıflar ekleyelim:

<!-- bileşeni kullanırken -->
<MyComponent class="baz boo" />

HTML çıktısı şu şekilde olacaktır:

<p class="foo bar baz boo">Hi!</p>

Aynı durum sınıf bağlamaları için de geçerlidir:

<MyComponent :class="{ active: isActive }" />

isActive doğru değerli (truthy) olduğunda HTML çıktısı şu şekilde olacaktır:

<p class="foo bar active">Hi!</p>

Bileşeninizin birden fazla kök öğesi varsa, bu sınıfı hangi öğenin alacağını tanımlamanız gerekir. Bunu $attrs bileşen özelliğini kullanarak yapabilirsiniz:

<!-- MyComponent şablonu $attrs kullanıyor -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

Şu çıktıyı üretecektir:

<p class="baz">Hi!</p>
<span>This is a child component</span>

Bileşen öznitelik kalıtımı hakkında daha fazla bilgiyi aktarılacak öznitelikler (fallthrough attributes) bölümünde bulabilirsiniz.

Satır İçi Stilleri Bağlama ​

Nesnelere Bağlama ​

:style JavaScript nesne değerlerine bağlamayı destekler - bu, HTML öğesinin style özelliğine karşılık gelir:

const activeColor = ref('red')
const fontSize = ref(30)

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

camelCase anahtarların kullanılması önerilse de :style aynı zamanda (gerçek CSS'deki kullanım şekillerine karşılık gelen) kebab-case CSS özellik anahtarlarını da destekler - örneğin:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

Şablonun daha temiz olması için genellikle doğrudan bir stil nesnesine bağlamak iyi bir fikirdir:

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

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

<div :style="styleObject"></div>

Yine, nesne stil bağlaması genellikle nesne döndüren hesaplanmış özellikler (computed properties) ile birlikte kullanılır.

:style yönergeleri, tıpkı :class gibi, düz stil öznitelikleriyle birlikte kullanılabilir.

Şablon:

<h1 style="color: red" :style="'font-size: 1em'">hello</h1>

Şu çıktıyı verir:

<h1 style="color: red; font-size: 1em;">hello</h1>

Dizilere Bağlama ​

:style özniteliğini birden fazla stil nesnesinden oluşan bir diziye bağlayabiliriz. Bu nesneler birleştirilecek ve aynı öğeye uygulanacaktır.

<div :style="[baseStyles, overridingStyles]"></div>

Otomatik Ön Ek Ekleme ​

:style içinde tarayıcıya özgü ön ek gerektiren bir CSS özelliği kullandığınızda, Vue uygun ön eki otomatik olarak ekler. Vue bunu, mevcut tarayıcıda hangi stil özelliklerinin desteklendiğini çalışma zamanında kontrol ederek yapar. Eğer tarayıcı belirli bir özelliği desteklemiyorsa, desteklenen bir tanesini bulmak için çeşitli ön ekli varyantlar test edilir.

Çoklu Değerler ​

Bir stil özelliğine birden fazla (ön ekli) değerden oluşan bir dizi sağlayabilirsiniz, örneğin:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Bu, dizideki değerlerden yalnızca tarayıcının desteklediği son değeri işleyecektir. Bu örnekte flexbox'ın ön eksiz sürümünü destekleyen tarayıcılar için display: flex çıktısını üretecektir.