Vue.js Stili Değiştir

Vue.js, Kullanıcı Arayüzleri (UI'ler) ve Tek Sayfalı Uygulamalar (SPA) oluşturmak için kullanılır. Vue kullanmayı öğrenmek kolaydır.js ve Angular ve ReactJS'nin en iyi birleştirilmiş özelliklerine sahip olduğu için bu programda uygulamalar geliştirirken mevcut olan özgürlük ve rahatlık çerçevesi. Bu nedenle kullanımı kolay ve temiz kodlaması ile bilinir.

Vue.js, stili dinamik olarak değiştirmek için kullanabileceğiniz stil bağlama sağlar. Herhangi bir HTML etiketindeki style özelliğine bir değişken bağlayabilir ve bağlı değişken değiştirildiğinde stili değiştirebilirsiniz. Bu yazıda, stil bağlamanın nasıl kullanılacağına ve vue kullanarak değişkenlerin stilinin nasıl değiştirileceğine bir göz atacağız.js.

Satır İçi Stil Ciltleme

vue'de.js'de, v-bind yönergelerini kullanarak değişkenleri stil özelliklerine bağlayabiliriz.

Nesne Sözdizimi

Satır içi CSS stilinde olduğu gibi, Vue'da da satır içi stil yapabiliriz.js v-bind yönergesi ve küme parantezleri nesne sözdizimini kullanarak. Aşağıdaki betiği kullanarak herhangi bir değişkeni style niteliğine bağlayabilirsiniz:

Ve komut dosyası etiketinde ve verilerinde:

ata()
dönüş
colorVar: 'kırmızı',
yazı tipiBoyutu: 14

Ayrıca nesneyi verilere indirebilir ve HTML'mizin daha temiz görünmesini sağlamak için bu nesneyi style özniteliği ile bağlayabiliriz:

veri()
dönüş
styleObject:
colorVar: 'kırmızı',
yazı tipiBoyutu: 14

Şimdi "styleObject" değişkenini style niteliğine aşağıdaki gibi bağlayacağız:

Dizi Sözdizimi

Vue.js ayrıca dizi sözdizimindeki birden çok değişkeni tek HTML etiketine aşağıdaki gibi bağlama seçeneği sunar:

Çoklu Değerler

Benzer şekilde, satır içi bağlama içindeki bir CSS özelliğine dizi sözdizimini kullanarak aşağıdaki gibi birden çok değer verebiliriz:

Bunlar, bir web sayfasının stilini dinamik olarak değiştirmek için style özniteliğiyle değişkenleri bağlamak için kullanabileceğimiz farklı yollardan bazılarıdır.

Özet

Bu makale, satır içi stili bağlama sözdizimini ele aldı. Ayrıca, vue'da değerleri veya değişkenleri stil niteliklerine bağlamak için kullanılan nesne sözdizimi ve dizi sözdizimini de öğrendiniz.js. Bu makale size vue'yi daha iyi anlamanıza yardımcı olduysa.js, linuxhint'te okumaya devam etmekten çekinmeyin.daha faydalı içerik için com.