class ها و inline-style های پویا (dynamic)

class ها و inline-style های پویا (dynamic)

در مقالات قبلی آموختیم که attribute های یک المان را می توان به صورت پویا (با استفاده از علامت : ) نوشت، اما آیا می توان از این روش برای attribute های class و style نیز استفاده کرد یا خیر؟

پاسخ سوال مطرح شده، "بله" است. برای درک این موضوع، class ها و style های یک المان را با دو syntax آرایه ای و آبجکتی (object syntax, array syntax) مورد بررسی قرار می دهیم.

در ابتدا قصد داریم به معرفی class های پویا بپردازیم:

syntax آبجکتی برای یک class

syntax آبجکتی برای یک class به صورت زیر است:

در این نوع syntax ما می توانیم به جای یک string، همانند کد زیر یک آبجکت را برای class تعریف کنیم.

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

در کد بالا، isActive یک data است که در آبجکت data تعریف شده و نوع آن Boolean است. بنابراین، هر زمان که مقدار آن true باشد active به عنوان یک کلاس برای این المان در نظر گرفته می شود، در غیر این صورت این class وجود نخواهد داشت.

نکتهبا توجه به اینکه این syntax به صورت آبجکت است می توان بیش از یک class نیز درون آن استفاده کرد. همچنین این نکته را نیز در نظر بگیرید که علاوه بر class های پویا تعریف شده، class های استاتیک (غیر پویا) را نیز می توان برای یک المان تعریف کرد. 

به کد زیر که دارای class های پویا  غیر پویا است توجه کنید.

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

که در data های تعریف شده نیز به صورت زیر هستند:

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

در این صورت با توجه به true بودن تنها یکی از data ها، در پروژه موردنظر کد زیر اجرا خواهد شد:

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

تذکردقت کنید که در syntax آبجکتی class هایی مانند ‘text-danger’ که به صورت چند کلمه ای هستن را باید درون دو علامت ‘ (single quotation) قرار داد.

با توجه به اینکه class های active و text-danger پویا هستند بنابراین هر زمان که هر یک از data های isActive یا hasError تغییر کنند، claas نیز همان لحظه به روز رسانی می شوند.

نکتهدر syntax آبجکتی، هیچ گونه قید و شرطی وجود ندارد که آبجکت حتماً به صورت inline در المان استفاده شود. گاهی اوقات این آبجکت را مانند کد زیر یک data در نظر می گیرند.

<div :class="classObject"></div>
data() {
  return {
      classObject: {
      	active: true,
      	'text-danger': false
      }
   }
}

اما یک روش بهتر و قدرتمندتر نیز وجود دارد که آن هم استفاده از computed property ها است. در این صورت، اگر بخواهیم در کدهای خود از computed property ها استفاده کنیم، باید به صورت زیر عمل کرد:

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

syntax آرایه ای برای یک class

تنها تفاوت این روش با روش آبجکتی، در syntax آن است. به این شکل که در این روش به جای آبجکت باید مطابق کد زیر از آرایه استفاده کرد. 

<div :class="[activeClass, errorClass]"></div>
data() {
  return {
      activeClass: 'active',
      errorClass: 'text-danger'
  }
},

که در این صورت کد زیر رندر خواهد شد:

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

در این روش می توان از شرط سه گانه (ternary expression) نیز مانند کد زیر استفاده کرد:

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

در این کد از دو class استفاده شده است که برای class اول از یک شرط استفاده شده است. تفسیر این شرط به صورت زیر است:

اگر isActive دارای مقدار باشد activeClass به عنوان class در نظر گرفته شود در غیر این صورت برای تگ <class ،<div></div در نظر گرفته نشود.

دقت شود که در درون آرایه نیز می توان از آبجکت استفاده کرد. به مثال زیر توجه کنید:

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

در این کد از دو class با نام های active و errorClass استفاده شده است. اما active تنها زمانی اعمال می شود که مقدار  isActiveبرابر true باشد.

نکته: مطالب بیان شده نه تنها در تگ های HTML کاربرد دارند بلکه در کامپوننت هایی که می سازید (مانند کد زیر) نیز قابل استفاده هستند.

<my-component :class="{ active: isActive }"></my-component>

نکته: تا الان دو syntax آبجکتی و آرایه ای بررسی شدند اما غیر از این دو روش، حالت دیگری نیز وجود دارد که مانند کلاس های استاتیک، به صورت string نوشته می شود. به کد زیر دقت کنید:

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

در این کد تنها یک class وجود دارد اما چون مقدار آن متغیر است و هر دفعه مقدار جدید به خود می گیرد باید class المان آن را به صورت پویا (class:) تعریف کرد.

syntax آبجکتی برای inline-style

syntax آبجکتی برای inline-style ها نیز همانند class ها است. برای مثال به کد زیر دقت کنید:

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
  return {
    activeColor: 'red',
    fontSize: 30
   }
},

نکته: برای نوشتن property های چند کلمه ای style هم می توان از حالت camelCase استفاده کرد و هم از حالت kebab-case. فقط دقت شود که در صورت استفاده از حالت kebab-case، باید property مورد نظر را درون علامت ‘ قرار داد.

در style کد بالا تنها از دو property با اسم های color و fontSize استفاده شد در صورتی که بخواهیم بیش از دو property استفاده کنیم کدهای template کثیف می شوند. برای رفع این مشکل می توان یک data جدید از نوع آبجکت تعریف کرده و مانند زیر از آن در کد ها استفاده کرد.

<div :style="styleObject"></div>
data() {
  return {
	styleObject: {
	  color: 'red',
	  fontSize: '13px'
    }
  }
},

در inline-style ها نیز می توان مانند class ها از computed property ها استفاده کرد.

syntax آرایه ای برای inline-style

در syntax آرایه برای inline-style ها نیز مانند class کار می کنیم. این گونه که برای style ها از آرایه ای از آبجکت های استفاده می کنیم. به کد زیر توجه کنید:

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

در کد بالا baseStyles و overridingStyles هر دو data از نوع آبجکت هستند. به عبارتی هر کدام از آن های می تواند شامل تعدادی property باشد.

نکته: در inline-style ها نیز مانند class ها می توان از هر دو حالت آبجکت و آرایه به صورت همزمان استفاده کرد. برای مثال کد زیر یک نمونه از این حالت را نشان می دهد:

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

این مقاله هم به پایان رسید امیدوارم که استفاده کافی را از آن برده باشد. 

دوره در دست تالیف است ... rocket
کاربر میهمان

دوست گرامی شما به عنوان کاربر میهمان در سایت سکان آکادمی حضور دارید لطفاً برای ارسال دیدگاه ابتدا وارد حساب خود شوید

اگر login نکردی برامون ایمیلت رو بنویس: