Vue හි කොන්දේසි සහිතව පෙන්වීම

අපි ඉගෙන ගන්න ඊළඟ නිර්දේශය හැඳින්වෙන්නේ v-if ලෙසය. එය භාවිතා කර ඔබට මූලද්‍රව්‍ය පෙන්වන්න හෝ සඟවන්න පුළුවන්. මෙම නිර්දේශය ක්‍රියා කරන්නේ කෙසේද යත්: එය පරාමිතියක් ලෙස data වස්තුවේ ඕනෑම දේපලක් ලබා ගනී. මෙම දේපලේ අගය true නම් - මූලද්‍රව්‍යය පෙන්වනු ලැබේ, එසේ නොමැතිනම් false නම් - සඟවනු ලැබේ.

අපි උදාහරණයක් බලමු. අපට v-if ගුණාංගය සහිත ඡේදයක් ඇති යුතුය. මෙම ගුණාංගයේ අගය ලෙස visible දේපල පවතින්න, මෙහෙමයි:

App.vue<template>
  <p v-if="visible">text</p>
</template>

අපි අපේ දේපලේ අගය true ලෙස සකසමු. මෙම අවස්ථාවේදී ඡේදය පෙන්වනු ලැබේ:

javascriptdata() {
  return {
    visible: true,
  }
}

නමුත් visible හි අගය false ලෙස සකස් කළහොත්, ඡේදය සඟවනු ඇත:

javascriptdata() {
  return {
    visible: false,
  }
}