Vue.js Conditional Class Binding İşlemi
Hepinize merhaba dostlarım 😊. Yine yeni bir pazar gününün gelmesi ile tekrardan karşınızdayım. Benim için inanılmaz stresli geçen haftanın ardından ne ara pazar günü geldi çattı inanın hiç farkında değildim 😊. Taa ki hatırlatıcımın blog günü yaklaşıyor demesine kadar 😅
Her neyse dostlarım çenem daha da düşmeden yeni bir konuya daha yavaştan değinelim diyorum. Hatırlarsanız bir önceki yazımda Vue.js üzerinde class binding konusuna değinmiştik. Yani kısaca hatırlayalım ne yapmıştık derseniz şöyle açıklayabilirim
Oluşturduğumuz classlar veya bootstrap in bize sunduğu hazır classlar ile istediğimiz elemente class binding oluşturabiliyorduk
şeklinde açıklayabilirim. Bu sefer buna ufak bir boyut kazandıracağız dostlarım. Yani başlıktan da anlayacağınız üzere "Conditional Class Binding" konusuna birazcık göz atacağız 😊. Şimdi bazı dostlarım hemen şunu diyecektir bana
Anaaaa hocam yoksa şartlı classlar mı işleyeceğiz. Yalnız bu birazcık karışık gibi geldi ama size güveniyoruz. Bunu da pratik şekilde anlatırsınız 😊
Çok teşekkür ederim dostlarım. Aynen düşündüğünüz gibi Şartlı Class yapısına değineceğim ve bunu elimden geldiğince pratik bir şekilde anlatmaya çalışacağım. Şimdiiii konumuza girmeden önce bu Conditional Class Binding konusu nedir ne değildir birazcık göz atalım derim
Nedir bu Conditional Class Bindings ?
Eveeeeet gelelim dostlarım Conditional Class Bindings konusuna 😊. Hatırlayacak olursanız dostlarım bir önceki yazımızda yani Class Bidings üzerinde oluşturduğumuz classlar ile veya bootstrap in bize sunduğu hazır classları binding ediyorduk. Bu Conditional Class Bindings de bu işlemi gerçekleştiriyor yani çok fazla bir farkı yok. Lakin fark nedir diye merak eden dostlarım vardır ben seziyorum 😅
Dostlarım farkı şu. Tamam bir class bağlamak istiyorsunuz elbette doğal bişey bu bir yazılımcı için. Ama bunu siz gelip de belirli bir duruma göre uuygylamak istiyorsanız işte bu Conditional Class Bindings olarak anılmaya başlar 😊. Şimdi gelelim bir diğer konuya
Peki hocam nerelerde kullanılır ?
Eveeeet geldik bir diğer enfes soru olan "Nerelerde kullanılır" sorusuna 😊. En basitinden örnek vermeye başlarsak dostlarım bir otomasyonun kayıt olma kısmında istenilen bilgilerdeki belirli şartlar (E-Mail Kuralı, Şifre Uzunluğu,Kullanıcı Adı vb.) durumlarına göre hatalı veya geçerli diye bir stil oluşturma işlemleri gerçekleştrebiliyoruz. Veya bir e-ticaret sitesi kodluyorsunuz diyelim. Bu e-ticaret sitesinde sepet kısmında belirli bir alt limit üzerinde siparişin verilmesini istiyorsunuz ve butonun gizlenmesini vs istiyorsunuz ya da disabled olarak ayarlanmasını diyelim bu Conditional Class Bindings yapısı ile çok rahat ve çok profesyonel şekilde ayarlayabilirsiniz 😊.
Artık konuyu az çok anladığımıza göre dostlarım gelin kodlama ekranlarımıza geçişimizi yapalım. Proje çatımızı oluşturalım (Bunun için kodları vereceğim size dostlarım şimdi)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Conditional Class Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Conditional Class Binding İşlemi | MFSoftware Blog",
data: {}
});
</script>
</body>
</html>şeklinde yapımızı oluşturalım dostlarım 😊. Şimdi ise ufak bir örnekle başlayalım konumuza. Öncelikle bir input oluşturalım ve içerisine girilen değer MFSoftware ise input değerimiz is-valid olsun. Değilse is-invalid olsun. Şimdi hemen kodlama kısmından ayarlamaları yapalım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Conditional Class Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container mt-3">
<input type="text" :class="'form-control'" v-model="isim" placeholder="İsim Giriniz">
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Conditional Class Binding İşlemi | MFSoftware Blog",
data: {
isim : ''
}
});
</script>
</body>
</html>şimdilik bu kısma kadar geldiğinizi biliyorum dostlarım. Helal olsun bu da bir başarıdır ellerinize emeğinize sağlık. Bu kısımdan sonra uygulayacağımız işlemin amacı tam olarak şu. Class Bindings kısmını da ayarladığınıza göre şimdi içerisine tam olarak şu mantıkta yazacağız
:class=" {'class_adi' : 'sart'} "işlem tam olarak bu dostlarım. Yani ilk kısımda hangi class değerini uygulayacağımızı, diğer kısımda da şartımızı yazacağız 😊. İşlem tam olarak bu 😊. Hemen kodlama kısmımıza geçelim ve bu ayarlamaları gerçekleştirelim
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Conditional Class Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container mt-3"> <!-- ŞEKLİNDE KURALIMIZI AYARLADIK-->
<input type="text" :class="['form-control', {'is-valid' : (isim != '' && isim=='MFSoftware')}]" v-model="isim" placeholder="İsim Giriniz">
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Conditional Class Binding İşlemi | MFSoftware Blog",
data: {
isim : ''
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Gelelim bunu test edelim dediğimizde karşımıza çıkacak olan sonuç
şeklinde bir sonuçla karşılaşıyoruz. Şimdiiiii sizin içinize şu sorunun doğduğuna inanıyorum dostlarım cidden 😊
Hocam mantığı 2 dakikada kavradık çok sağolun çok teşekkür ederiz. Lakin burada birden fazla koşul kullanacağımız durumlarda bu işlemi nasıl gerçekleştirebiliriz. Yani siz anladınız Multi Conditional işlemlerinde harici bir mantık mı kullanacağız ?
şeklinde içinize sorular doğuyordur dostlarım eminim. İnanır mısınız öğrenme sürecinde bu şekilde zihninizde soruların canlanması kadar tatlılık veren bir şey yok neredeyse 😊.
Sorunuza gelecek olursak dostlarım dediğiniz işlem çok ama çok ahım şahım bişey değil. Oldukça basit. Mantığı tamamen şu
:class="{ 'class1' : 'sart1' , 'class2' : 'sart2' }"şeklinde aralarına virgül atarak istediğiniz kadar uzatabilirsiniz 😊. Bu kısmı da anladığımıza göre dostlarım yukarıdaki örneği biraz daha ısıtıp Seyyar Yazılımcı ifadesi geldiğinde de is-valid class'ını uygulayalım. Hemen kodlama ekranımızı açalım ve
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Conditional Class Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container mt-3">
<input type="text" :class="['form-control', {'is-valid' : (isim != '' && (isim=='MFSoftware' || isim=='Seyyar Yazılımcı'))}]" v-model="isim" placeholder="İsim Giriniz">
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Conditional Class Binding İşlemi | MFSoftware Blog",
data: {
isim : ''
}
});
</script>
</body>
</html>şeklinde ayarlamamızı gerçekleştirelim 😊. Hemen test ettiğimizde ise
şeklinde iki ayrı çıktıyla gönül rahatlığıyla karşılaşabiliriz dostlarım 😊. Bütün işlemlerimiz bu kadar. Kısacık bir kodlar bütün işlemlerimizi gerçekleştirdik diyebiliriz 😊.
Eveeeet dostlarım bu yazımda sizlere elimden geldiğince dilim döndüğünce Vue.js Conditional Class Binding konusundan elimden geldiğince dilim döndüğünce bahsettim. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık gelebilir. Hani her ne kadar da her yazımda basit dememin yanısıra karmaşık olan yanları illa ki vardır yeni öğrenen dostlarım için. Aynı yollardan geçtiğim için biliyorum anlıyorum 😊. Bu aşamada yapmanızı istediğim tek şey her yazımda da dediğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız 😊". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır.
Aynı zamanda 25 Aralık 2022 de kurmuş olduğum seyyaryazilimci.com soru cevap sitesi de yayında dostlarım haberiniz olsun. Her zaman dediğim gibi sorular ve cevaplar belirli bir süre admin onayından geçerek sistem üzerinde yayınlanmaktadır dostlarım bilginiz olsun😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer