روش‌های کار با Conditional و Loop در Vue.js | آموزش v-if، v-show و v-for

شرط‌ها (Conditionals) و حلقه‌ها (Loops) در Vue.js نقش مهمی در کنترل و نمایش محتوا دارند و به توسعه‌دهندگان امکان می‌دهند که بر اساس شرایط مختلف، عناصر و کامپوننت‌ها را به‌صورت داینامیک مدیریت کنند. در این مقاله، با دستورالعمل‌های v-if، v-else-if، v-else و v-for آشنا می‌شویم و به بررسی روش‌های استفاده از شرط‌ها و حلقه‌ها در Vue.js می‌پردازیم.

کار با شرط‌ها در Vue.js

Vue.js از دستورالعمل‌های شرطی مانند v-if، v-else-if و v-else برای کنترل نمایش عناصر استفاده می‌کند. این دستورالعمل‌ها اجازه می‌دهند که بر اساس مقادیر داده‌ها، تصمیم بگیرید که چه عناصری باید در DOM نمایش داده شوند.

استفاده از v-if

v-if یک شرط مستقیم برای نمایش یا عدم نمایش یک عنصر است. اگر شرط در v-if درست (true) باشد، عنصر نمایش داده می‌شود و در غیر این صورت از DOM حذف می‌شود.

مثال ساده از v-if:

< div id = " app " >
  < p v-if = " isLoggedIn " > Welcome back, User! < / p >
  < p v-else>Login to continue < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        isLoggedIn : false
      } ;
    }
  } ) ;

در این مثال:

• اگر مقدار isLoggedIn درست باشد، پیام خوش‌آمدگویی نمایش داده می‌شود؛ در غیر این صورت، پیام ورود به نمایش در می‌آید.

استفاده از v-else-if و v-else

v-else-if و v-else برای افزودن شاخه‌های شرطی بیشتر به v-if استفاده می‌شوند. با استفاده از این دستورالعمل‌ها می‌توانید چندین شرایط مختلف را برای نمایش عناصر به کار ببرید.

مثال: استفاده از v-if، v-else-if و v-else:

< div id = " app " >
  < p v-if = " status === ' loading ' " > Loading... < / p >
  < p v-else-if = " status === 'success'">Data loaded successfully! < / p >
  < p v-else > Error loading data. < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        status : ' loading '
      } ;
    }
  } ) ;

در این مثال:

• اگر status برابر loading باشد، پیام "در حال بارگذاری" نمایش داده می‌شود.

• اگر status برابر success باشد، پیام "داده با موفقیت بارگذاری شد" نمایش داده می‌شود.

• در سایر حالات، پیام "خطا در بارگذاری" نمایش داده می‌شود.

استفاده از v-show

v-show نیز مانند v-if برای نمایش یا مخفی‌سازی عناصر به کار می‌رود، اما تفاوت آن در این است که v-show عنصر را به‌طور کامل از DOM حذف نمی‌کند و تنها با استفاده از display: none آن را مخفی می‌کند.

مثال ساده از v-show:

< div id = " app " >
  < p v-show = " isVisible " > This text is visible < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        isVisible : true
      } ;
    }
  } ) ;

در این مثال، متن تنها زمانی نمایش داده می‌شود که isVisible درست باشد.

استفاده از حلقه‌ها در Vue.js

Vue.js از دستور v-for برای ایجاد حلقه و تکرار عناصر استفاده می‌کند. v-for به شما اجازه می‌دهد که بر اساس آرایه‌ها، اشیاء و حتی اعداد، عناصر تکراری ایجاد کنید.

استفاده از v-for با آرایه‌ها

پرکاربردترین روش استفاده از v-for در Vue.js، تکرار بر روی آرایه‌ها است.

مثال: استفاده از v-for با آرایه‌ها:

< div id = " app " >
  < ul >
    < li v-for = " (item, index) in items " :key = " index " > { { item } } < / li >
  < / ul >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        items : [ ' Apple ' , ' Banana ' , ' Cherry ' ]
      } ;
    }
  } ) ;

در این مثال:

• با استفاده از v-for، هر آیتم در آرایه items به صورت یک عنصر < li > نمایش داده می‌شود.

• :key یک کلید یکتا برای هر عنصر در حلقه ایجاد می‌کند که برای بهینه‌سازی و ردیابی تغییرات ضروری است.

استفاده از v-for با اشیاء

می‌توانید از v-for برای تکرار ویژگی‌های یک شیء نیز استفاده کنید.

مثال: استفاده از v-for با اشیاء:

< div id = " app " >
  < ul >
    < li v-for = " ( value , key , index ) in user " :key = " index " > { {key } } : { { value } } < / li >
  < / ul >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        user : { name : ' John ' , age : 30 , country : ' USA ' }
      } ;
    }
  } ) ;

در این مثال:

• v-for بر روی ویژگی‌های شیء user حلقه می‌زند و کلید و مقدار هر ویژگی را نمایش می‌دهد.

استفاده از v-for برای ایجاد حلقه‌های عددی

با استفاده از v-for، می‌توانید یک حلقه عددی نیز ایجاد کنید.

مثال: ایجاد حلقه عددی با v-for:

< div id = " app " >
  < p v-for = " n in 5 " :key = " n " > This is item { { n } } < / p >
< / div >

  new Vue ( {
    el : ' #app '
  } ) ;

در این مثال، پنج عنصر < p > ایجاد می‌شود که هرکدام شماره خاص خود را دارند.

استفاده ترکیبی از شرط‌ها و حلقه‌ها

گاهی نیاز است که شرط‌ها و حلقه‌ها را به‌صورت ترکیبی استفاده کنید. برای این کار می‌توانید درون حلقه از v-if یا v-show استفاده کنید تا تنها آیتم‌هایی که شرایط خاصی را دارند نمایش داده شوند.

مثال: استفاده ترکیبی از v-for و v-if:

< div id = " app " >
  < ul >
    < li v-for = " item in items " :key = " item.id " v-if = " item.visible " > { { item.name } } < / li >
  < / ul >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        items : [
          { id : 1 , name : ' Item 1 ' , visible: true } ,
          { id : 2 , name : ' Item 2 ' , visible: false } ,
          { id : 3 , name : ' Item 3 ' , visible: true }
        ]
      } ;
    }
  } ) ;

در این مثال، تنها آیتم‌هایی که ویژگی visible آن‌ها true است نمایش داده می‌شوند.

بهترین شیوه‌ها در استفاده از شرط‌ها و حلقه‌ها

• استفاده از :key در حلقه‌ها: همواره از :key برای تعیین یک کلید یکتا برای هر عنصر درون حلقه استفاده کنید تا Vue.js بتواند بهینه‌سازی و بروزرسانی عناصر را به درستی مدیریت کند.

• ترجیح استفاده از v-show در شرایط تکراری: در صورتی که نیاز است عناصری را به‌طور مکرر نمایش و مخفی کنید، از v-show به جای v-if استفاده کنید تا Vue.js عنصر را تنها یک بار در DOM ایجاد کند.

• ترکیب مناسب شرط‌ها و حلقه‌ها: از استفاده بیش از حد v-if و v-for در یک عنصر خودداری کنید، زیرا این کار ممکن است کد را پیچیده و کند کند. در صورت امکان، شرط‌ها را در محاسبات داده‌ها قرار دهید.

نتیجه‌گیری

شرط‌ها و حلقه‌ها در Vue.js ابزارهای قدرتمندی برای مدیریت نمایش و تکرار عناصر هستند. با استفاده مناسب از دستورالعمل‌هایی مانند v-if، v-else-if، v-else و v-for، می‌توانید رفتارهای داینامیک و قابل تنظیم در رابط کاربری ایجاد کنید و تجربه کاربری بهتری فراهم آورید. آشنایی با این دستورالعمل‌ها و بهترین شیوه‌های استفاده از آن‌ها می‌تواند به شما در بهبود کدنویسی و بهینه‌سازی پروژه‌ها کمک کند.