اتصال کلاس و استایل (Class and Style Bindings) ​

یک نیاز رایج برای اتصال داده‌‌، دستکاری لیستِ کلاس‌ها و استایل‌های درون خطی (inline styles) یک عنصر است. از آنجا که class و style هر دو خاصیت هستند، می‌توانیم از v-bind برای اختصاص یک مقدار رشته‌ای به آن‌ها به صورت پویا، درست مانند سایر خاصیت‌ها استفاده کنیم. با این حال، تلاش برای تولید این مقادیر با استفاده از اتصال رشته‌ها می‌تواند خسته‌کننده و مستعد خطا باشد. به همین دلیل، Vue هنگامی که v-bind با class و style استفاده شود، قابلیت‌های ویژه‌ای را فراهم می‌کند. اضافه بر رشته‌ها، همچنین می‌توانند به اشیا یا آرایه‌ها نیز متصل شوند.

اتصال کلاس‌های HTML ​

اتصال به اشیاء (Binding to Objects) ​

می‌توانیم یک شیء را به ‎:class (کوتاه‌شده عبارت v-bind:class) برای تعویض کلاس‌های المان به صورت پویا، ارسال کنیم:

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

سینتکس بالا بدین معناست که وجود کلاس active توسط مقدار درستی (Truthy) داده isActive تعیین خواهد شد.

شما می‌توانید چندین کلاس را با داشتن فیلدهای بیشتر در شیء تغییر دهید. علاوه بر این، دستور ‎:class همچنین می‌تواند با خاصیت ساده class هم‌زیستی داشته باشد. بنابراین با در نظر گرفتن وضعیت زیر:

const isActive = ref(true)
const hasError = ref(false)

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

و تمپلیت زیر:

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

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

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

وقتی isActive یا hasError تغییر کند، لیست کلاس‌ها به ترتیب به‌روزرسانی خواهد شد. به عنوان مثال، اگر hasError به true تبدیل شود، لیست کلاس‌ها به "static active text-danger" تبدیل خواهد شد.

شیء متصل‌شده نیازی نیست درون‌خطی (inline) باشد:

const classObject = reactive({
  active: true,
  'text-danger': false
})

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

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

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

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

ما همچنین می‌توانیم به یک computed property که یک شیء برمی‌گرداند متصل شویم. این الگویی متداول و قدرتمند است:

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

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

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

اتصال به آرایه‌ها ​

می‌توانیم ‎:class را به یک آرایه متصل کنیم تا یک لیست از کلاس‌ها را اعمال کنیم:

const activeClass = ref('active')
const errorClass = ref('text-danger')

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

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

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

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

اگر می‌خواهید یک کلاس را در لیست به صورت شرطی تغییر دهید، می‌توانید از عبارت شرطی تک خطی (ternary expression) استفاده کنید:

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

این همیشه errorClass را اعمال خواهد کرد، اما activeClass فقط زمانی اعمال خواهد شد که isActive درست باشد.

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

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

با کامپوننت‌ها ​

این بخش به پیش‌نیاز کامپوننت‌ها نیاز دارد. اگر می‌خواهید می‌توانید آن را رد کنید و بعدا برگردید.

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

به عنوان مثال، اگر کامپوننتی به نام MyComponent با قالب زیر داشته باشیم:

<!-- تمپلیت کامپوننت فرزند -->
<p class="foo bar">Hi!</p>

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

<!-- هنگام استفاده از کامپوننت -->
<MyComponent class="baz boo" />

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

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

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

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

وقتی isActive درست باشد، HTML رندرشده به این صورت خواهد بود:

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

اگر کامپوننت شما چندین المان ریشه‌ای داشته باشد، باید مشخص کنید کدام المان این کلاس را دریافت خواهد کرد. می‌توانید این کار را با استفاده از خاصیت $attrs کامپوننت انجام دهید:

<!-- $attrs با استفاده از MyComponent تمپلیت -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

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

<p class="baz">Hi!</p>
<span>This is a child component</span>

می‌توانید در بخش خاصیت‌های Fallthrough بیشتر در مورد انتقال خاصیت‌های کامپوننت بخوانید.

اتصال استایل‌های درون‌خطی (Binding Inline Styles) ​

اتصال به اشیا ​

‎:style از اتصال به شیء جاوااسکریپت پشتیبانی می‌کند - آن متناظر با خاصیت style عناصر HTML است:

const activeColor = ref('red')
const fontSize = ref(30)

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

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

اگرچه کلیدهای camelCase توصیه می‌شوند، ‎:style همچنین از کلیدهای خاصیت‌ CSS با خط‌تیره نیز پشتیبانی می‌کند (مربوط به نحوه استفاده از آنها در CSS واقعی است) - به عنوان مثال:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

اتصال مستقیم به یک شیء استایل ایده‌ی خوبی است تا تِمپلیت تمیزتر باشد:

const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

<div :style="styleObject"></div>

اتصال شیء استایل اغلب با خاصیت‌های computed که اشیاء برمی‌گردانند، استفاده می‌شود.

اتصال به آرایه‌ها ​

می‌توانیم ‎:style را به یک آرایه از چندین شیء استایل متصل کنیم. این اشیاء ادغام شده و به همان عنصر اعمال خواهند شد:

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

پیشوند خودکار (Auto-prefixing) ​

وقتی از یک خاصیت CSS که نیاز به یک vendor prefix در ‎:style دارد، استفاده می‌کنید، Vue به طور خودکار prefix مناسب را اضافه خواهد کرد. Vue این کار را با بررسی در زمان اجرا برای دیدن اینکه چه خاصیت‌های استایلی در مرورگر فعلی پشتیبانی می‌شوند، انجام می‌دهد. اگر مرورگر از یک خاصیت خاص پشتیبانی نکند، prefix های مختلف پیاده خواهند شد تا یکی پیدا شود که پشتیبانی می‌شود.

مقادیر چندگانه (Multiple Values) ​

می‌توانید یک آرایه از چندین مقدار (پیشونددار) را به یک خاصیت استایل ارائه دهید، به عنوان مثال:

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

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