نحوه بایند کردن کلاس در کنار کلاس دیگر

با سلام
دوستان کسی میتونه راهنمایی کنه که من توی ویو چطور میتونم دو تا کلاس رو به یه تگ بدم که یکیش از کلاس های بوت استرپ هست و کلاس دوم از پراپس گرفته میشه.
درواقع نمیدونم که چطوری میشه این دوتا کلاس رو در کنار هم bind کرد.
تصویر کد رو قرار میدم و منظورم از کلاس ها ، اون کلاس هایی هست که در بالای کد اومده. کلاس alert و 'alert-'{{alertType}}

 <template>
  <div :class=['alert', 'alert-'{{alertType}}] role="alert">
    <strong>{{ alertTitle }}! </strong>
    {{ message }}
    <button type="button" class="close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>
<script>
export default {
  props: {
    alertTitle: String,
    message: String,
    alertType: String,
  },
};
</script>

ممنون

ثبت پرسش جدید

moha li

تخصص : توسعه دهنده لاراول و Vue

@mohaligateway 4 سال پیش مطرح شد

سلام

 <template>
  <div :class="['alert', '`alert-${alertType}`']" role="alert">
    <strong>{{ alertTitle }}! </strong>
    {{ message }}
    <button type="button" class="close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</template>
<script>
export default {
  props: {
    alertTitle: String,
    message: String,
    alertType: String,
  },
};
</script>

@YahyaHosseini

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

نحوه بایند کردن کلاس در کنار کلاس دیگر

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

	<template>
	<div :class=['alert', 'alert-'{{alertType}}] role="alert">
	<strong>{{ alertTitle }}! </strong>
	{{ message }}
	<button type="button" class="close">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	</template>
	<script>
	export default {
	props: {
	alertTitle: String,
	message: String,
	alertType: String,
	},
	};
	</script>

	<template>
	<div :class="['alert', '`alert-${alertType}`']" role="alert">
	<strong>{{ alertTitle }}! </strong>
	{{ message }}
	<button type="button" class="close">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	</template>
	<script>
	export default {
	props: {
	alertTitle: String,
	message: String,
	alertType: String,
	},
	};
	</script>