فهرست سرفصل‌های Vue
خانه (HOME) معرفی (Intro) دایرکتیوها (Directives) v-bind (v-bind) v-if (v-if) v-show (v-show) v-for (v-for) رویدادها (Events) v-on (v-on) متدها (Methods) تغییردهنده های رویداد (Event Modifiers) فرم ها (Forms) v-model (v-model) بایندینگ CSS (CSS Binding) ویژگی های محاسبه شده (Computed Properties) واچرها (Watchers) قالب ها (Templates) چرا، چگونه و راه اندازی (Why, How and Setup) اولین صفحه SFC (First SFC Page) کامپوننت ها (Components) پراپس (Props) کامپوننت های v-for (v-for Components) $emit() ($emit()) ویژگی های عبوری (Fallthrough) (Fallthrough Attributes) استایل Scoped (Scoped Styling) کامپوننت های محلی (Local Components) اسلات ها (Slots) v-slot (v-slot) اسلات های Scoped (Scoped Slots) کامپوننت های پویا (Dynamic Components) Teleport (Teleport) درخواست HTTP (HTTP Request) رفرنس های تمپلیت (Template Refs) هوک های چرخه عمر (Lifecycle Hooks) Provide/Inject (Provide/Inject) مسیریابی (Routing) ورودی های فرم (Form Inputs) انیمیشن ها (Animations) انیمیشن با v-for (Animations with v-for) بیلد (Build) Composition API (Composition API) ویژگی های توکار (Built-in Attributes) ویژگی 'is' ('is' Attribute) ویژگی 'key' ('key' Attribute) ویژگی 'ref' ('ref' Attribute) کامپوننت های توکار (Built-in Components) <KeepAlive> (<KeepAlive>) <Teleport> (<Teleport>) <Transition> (<Transition>) <TransitionGroup> (<TransitionGroup>) المان های توکار (Built-in Elements) <component> (<component>) <slot> (<slot>) <template> (<template>) نمونه کامپوننت (Component Instance) $attrs ($attrs) $data ($data) $el ($el) $parent ($parent) $props ($props) $refs ($refs) $root ($root) $slots ($slots) $emit() ($emit()) $forceUpdate() ($forceUpdate()) $nextTick() ($nextTick()) $watch() ($watch()) دایرکتیوها (Directives) v-bind (v-bind) v-cloak (v-cloak) v-for (v-for) v-html (v-html) v-if (v-if) v-else-if (v-else-if) v-else (v-else) v-memo (v-memo) v-model (v-model) v-on (v-on) v-once (v-once) v-pre (v-pre) v-show (v-show) v-slot (v-slot) v-text (v-text) گزینه های نمونه (Instance Options) داده ها (data) متدها (methods) محاسبه شده ها (computed) watch (watch) پراپس (props) emits (emits) expose (expose) هوک های چرخه عمر (Lifecycle Hooks) beforeCreate (beforeCreate) created (created) beforeMount (beforeMount) mounted (mounted) beforeUpdate (beforeUpdate) updated (updated) beforeUnmount (beforeUnmount) unmounted (unmounted) errorCaptured (errorCaptured) renderTracked (renderTracked) renderTriggered (renderTriggered) activated (activated) deactivated (deactivated) serverPrefetch (serverPrefetch) مثال ها (Examples) تمرین ها (Exercises) کوییز (Quiz) سیلابس (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Vue

Vue — ویژگی 'is' ('is' Attribute)

آخرین بروزرسانی: 1404/08/21
قبلی: ویژگی های توکار (Built-in Attributes) بعدی: ویژگی 'key' ('key' Attribute)

ویژگی 'is' ('is' Attribute)

ویژگی is در Vue برای ساخت «کامپوننت پویا» به کار می رود. یعنی با عوض شدن مقدارش، نمایش بین کامپوننت ها جابه جا می شود. همین طور می تواند یک تگ معمولی را با یک کامپوننت جایگزین کند. در ادامه، با مثال های منبع جلو می رویم.

تعریف و کاربرد ویژگی is

کامپوننت پویا (Dynamic Component): روی تگ داخلی <component> مقدار is تعیین می کند کدام کامپوننت فعال باشد.

جایگزینی تگ بومی با کامپوننت: با is="vue:my-component" یک تگ HTML با کامپوننت Vue جایگزین می شود.

عنصر بومی سفارشی: استفاده از is برای «Customized Built-in» مربوط به استاندارد وب است، نه ویژگی Vue.

نمونه: کامپوننت پویا با ویژگی is

&lt;template&gt;
  &lt;h1&gt;Dynamic Components&lt;/h1&gt;
  &lt;p&gt;App.vue switches between which component to show.&lt;/p&gt;
  &lt;button @click="toggleValue = !toggleValue"&gt;Switch component&lt;/button&gt;
  &lt;component :is="activeComp"&gt;&lt;/component&gt;
&lt;/template&gt;

مشاهده در ادیتور

نکته: مقدار is معمولاً با v-bind به متغیر محاسبه شده وصل می شود.

نمونه 1: جایگزینی یک تگ HTML با کامپوننت Vue

در این مثال، تگ <img> با یک کامپوننت فرزند جایگزین می شود.

&lt;template&gt;
  &lt;h2&gt;Example Built-in 'is' Attribute&lt;/h2&gt;
  &lt;p&gt;The IMG tag below is set to be replaced by a component by the use of 'is="vue:child-comp"'.&lt;/p&gt;
  &lt;img is="vue:child-comp" /&gt;
&lt;/template&gt;

مشاهده در ادیتور

ChildComp.vue

&lt;template&gt;
  &lt;div&gt;
    &lt;h3&gt;ChildComp.vue&lt;/h3&gt;
    &lt;p&gt;This is the child component&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style scoped&gt;
div {
  border: solid black 1px;
  background-color: lightgreen;
  padding: 10px;
  max-width: 250px;
  margin-top: 20px;
}
&lt;/style&gt;

مشاهده در ادیتور

گام های عملی

  1. اگر جابه جایی کامپوننت می خواهی، از <component :is> استفاده کن.
  2. نام کامپوننت فعال را در متغیرت نگه دار.
  3. با یک دکمه مقدار را عوض کن تا نمایش تغییر کند.

جمع بندی سریع

  • ویژگی is نمایش کامپوننت فعال را تعیین می کند.
  • می توان تگ HTML را با کامپوننت جایگزین کرد.
  • prefix vue: برای جایگزینی لازم است.
  • عنصر سفارشی بومی، ویژگی Vue نیست.

برای مرور کلی: ویژگی is و ویژگی های توکار دیگر.

قبلی: ویژگی های توکار (Built-in Attributes) بعدی: ویژگی 'key' ('key' Attribute)