در این جلسه قصد داریم استایل ها و کلاس های ظاهری را در کامپوننت های vue.js مورد استفاده قرار دهیم.

بیشتر اوقات به یک روش برای اتصال داده‌ها به فرم‌ها و .. نیاز داریم تا بتوانیم یک سری عملیات را برای یک لیست کلاس و استایل درون آن اجرا کنیم. بنابراین هر دو موارد، یعنی استایل‌ها و کلاس‌ها به عنوان صفت مورد استفاده قرار می‌گیرند. برای استفاده از آنها می‌توان باید v-bind را بکار برد. در این مسیر نیاز داریم که تنها یک رشته‌ی خروجی محاسبه‌شده را بدون عبارتهای محاسباتی به نمایش بگذاریم. برای این کار، Vue.js ابزارهای بسیاری را برای دسترسی به این هدف ایجاد کرده است. بنابراین با استفاده از v-bind به همراه class و style می‌توانیم به این نتیجه برسیم. علاوه بر رشته‌ها، عبارتها می‌توانند تحت عنوان آرایه‌ها و یا اشیاء مورد بررسی قرار بگیرند.

اتصالات کلاس‌های HTML با ساختار شیءگرایی

می‌توان یک شیء را به v-bind:class به صورت پویا ارسال کرد. به مثال زیر دقت کنید:

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

ساختار بالا کلاس active را نشان می‌دهد که مطابق شرایط ویژگی داده isActive مقداردهی می‌شود.

در نظر داشته باشید، می‌توان به صورت همزمان از چندین کلاس استفاده کرد. برای اینکار تنها کافیست دستور بالا را به صورت زیر بازنویسی کنید:

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

و متناسب با داده‌های بالا داریم:

data: {
	isActive: true,
	hasError: false
}

در انتها خروجی زیر نمایش داده می شود:

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

هنگامیکه عبارت isActive یا hasError تغییر کند، لیست کلاس‌ها آپدیت می‌شود. برای مثال اگر hasError برابر ture باشد، لیست کلاس‌ها به صورت “static active text-danger” خواهد بود.

همچنین می‌توان از اشیاء برای ارسال اطلاعات به کلاس استفاده کرد:

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

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

نتیجه بدست آمده با مثال قبلی یکسان خواهد بود. همچنین می‌توان از Computed برای اتصال اطلاعات به کلاس‌ها هم استفاده نمود. چرا که ویژگی های Computed یک شیء را بر می‌گردانند. به مثال زیر دقت کنید:

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

اتصالات کلاس‌های HTML با ساختار آرایه

آرایه ها را هم می توان برای نمایش لیست کلاس‌ها به v-bind:class ارسال کرد. به مثال زیر توجه کنید:

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

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

خروجی کد بالا مشابه کد زیر خواهد بود:

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

همچنین می‌توان کلاس کد بالا را به صورت شرطی نوشت تا در صورت وجود خطا مقدار کلاس‌ها تغییر کند. به نمونه زیر دقت کنید:

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

با توجه به قدرت فریم ورک Vue.js می‌توان ساختار اشیاء را درون ساختار کلاس‌ها استفاده کرد. که در صورت با مثال زیر مواجه خواهیم شد:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 

اتصالات کلاس‌های HTML با کامپوننت‌ها (v-bind with component)

هنگامیکه یک کلاس خاص را درون یک کامپوننت تعریف کنید، آن کلاس به سایر المان‌های اصلی کامپوننت اضافه می شود. توجه داشته باشید که این کلاس روی کلاس‌های اصلی کپی و جایگزین نمی‌شوند. برای نمونه به مثال زیر توجه کنید:

در این مثال یک کامپوننت تعریف کرده‌ایم:

Vue.component('laravel-component', {
	template: '<p class="laravelApp laravelMain"></p>'
})

سپس در بکارگیری این کامپوننت یک کلاس به آن اضافه می‌کنیم:

<laravel-component class="myLaravel"></laravel-component>

در نهایت خروجی این نمونه به صورت زیر خواهیم داشت:

<p class="laravelApp laravelMain myLaravel">یک پاراگراف تست مینویسیم</p>

این موضوع برای کلاس‌های متصل شده به کامپوننت‌ها با استفاده از v-bind:class نیز صادق است:

<laravel-component v-bind:class="{ active: isActive }"><laravel-component>

هنگامیکه مقدار isActive صحیح باشد، خروجی کد بالا به صورت زیر خواهد بود:

<p class="laravelApp laravelMain isActive">یک متن برای تست مینویسیم</div>

 

اتصالات درون استایل‌ها (Styles) با ساختار شیءگرایی

ساختار اشیاء برای v-bind:style یا همان اتصالات درون استایل‌ها ساده است. می‌توانید ویژگی‌های CSSای را به صورت camelCase 0 یا kebab-case نام‌گذاری گنید. به مثال ذیل توجه کنید:

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

data: {
	activeColor: 'red',
	fontSize: 30
}

برای زیباتر شدن ظاهر نوشتاری کدها از شیء برای معرفی استایل‌ها استفاده می‌کنند که در اینصورت خواهیم داشت:

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

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

مجددا تاکید می‌کنیم، استفاده از ساختار شیء داخل v-bind:style در اغلب موارد در ویژگی‌های Computed به کار گرفته می‌شود. زیرا ویژگی‌های Computed یک شیء را باز می‌گردانند.

 

اتصالات درون استایل‌ها (Styles) با ساختار آرایه‌ها

ساختار آرایه‌ها برای اتصالات درون استایل‌ها دقیقا مشابه ساختار آرایه‌های برای اتصالات کلاس‌ها درون v-bind:class است. بنابراین برای v-bind:style می‌توان چندین استایل را تعریف کرد. به کد زیر توجه کنید:

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

اگر یک ویژگی CSS به v-bind:style اضافه کنید، به عنوان مثال ویژگی transform، فریم‌ورک Vue به صورت خودکار و اتوماتیک پیشوند متناسب با آن ویژگی را اضافه خواهد کرد.