اتصال Class و Style

اصول آموزش vuejs

تاریخ : جمعه 12 مهر 1398

بررسی (Class and Style Bindings)

یک نیاز مشترک برای اتصال داده ها ، دستکاری در لیست class المان ها و style درون خطی آن است. از آنجا که هر دو صفت هستند ، می توانیم از v-bind برای دستکاری آنها استفاده کنیم: ما فقط نیاز داریم که رشته نهایی را با عبارات خود ایجاد کنیم. با این حال ، استفاده از اتصال رشته ها خسته کننده و مستعد خطا است. به همین دلیل ، Vue ابزار ویژه ای را جهت استفاده از v-bind در class و style ارائه می دهد.


Binding HTML Classes

استفاده از روش Object Syntax

ما می توانیم یک object را از طریف v-bind:class منتقل کنیم:

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

نحو فوق به این معنی است که فعل بودن کلاس active توسط مقدار boolean خاصیت 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 تغییر می کند، لیست class براین اساس بروزرسانی می گردد. برای مثال اگر مقدار hasError برابر true باشد، لیست class بدین صورت خواهد بود : "static active text-danger".

لازم نیست object بصورت inline محدود گردد:

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

این نتیجه همان نتیجه را خواهد داد. ما همچنین می توانیم به یک خاصیت computed که یک شی را برمی گرداند متصل شویم که الگوی رایج و مناسبی است:

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

استفاده از روش Array Syntax

ما می توانیم یک آرایه رابه 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>

چنانچه isActive برابر true باشد مقدار class برابر activeClass در غیر اینصورت errorClass خواهد بود.

با این وجود ، اگر چندین کلاس مشروط داشته باشید ، می تواند کمی طولانی گردد. به همین دلیل امکان استفاده از object syntax در ترکیب با array syntax نیز وجود دارد:

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

استفاده از Components

در این بخش فرض بر این است که شما با مبحث Vue Component آشنا باشید.

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

برای مثال چنانچه کامپوننت زیر را اعلام کنیم:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

چنانچه داشته باشیم:

<my-component class="baz boo"></my-component>

HTML رندر شده بدین صورت خواهد بود:

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

در مورد اتصال کلاس نیز همین موضوع صادق است:

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

زمانیکه isActive برابر true باشد، HTML رندر شده بدین صورت خواهد بود:

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


اتصال Inline Styles

استفاده از Object Syntax

استفاده از object syntax برای v-bind:style کاملاً ساده است - تقریباً شبیه CSS است ، با این تفاوت که یک شیء JavaScript است. می توانید جهت نامگذاری خاصیت های CSS از هریک از روش های camelCase و یا kebab-case استفاده نمایید :

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

غالباً ایده ی خوبی است که مستقیماً به یک شیء style متصل شوید تا قالب تمیزتر شود:

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

روش object syntax اغلب در رابطه با خاصیت های computed که یک شی را برمی گردانند استفاده می شود.


استفاده از Array Syntax

روش array syntax برای v-bind:style این اجازه را می دهد تا چندین style objects را اعمال نمایید.

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

Auto-prefixing

زمانیکه شما بخواهید یک خاصیت CSS که شامل vendor prefixes را در v-bind:style استفاده نمایید، برای مثال (-webkit-،transformT)،Vue بصورت اتوماتیک آنها را شناسایی و پیشوندهای مناسب را به آن ها اضافه و به style اعمال می نماید.


Multiple Values

از نسخه 2.3.0+ شما می توانید آرایه ای از پیشوندها را جهت اعمال در خواص Style فراهم نمایید. برای مثال :

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

تنها آخرین مقدار در آرایه که مرورگر از آن پشتیبانی می کند رندر خواهد شد. در این مثال ،display: flex برای مرورگرهایی که نسخه غیر پیشوند از flexbox را پشتیبانی می کنند رندر خواهد شد.


منابع مورد مطالعه جهت جمع آوری این مطلب:
https://vuejs.org/v2/guide/class-and-style.html


نظرات