Vue හි ප්‍රතික්‍රියාශීලී කොන්දේසිය

කොන්දේසිය ප්‍රතික්‍රියාශීලී වන පරිදි සකසමු. උදාහරණයක් ලෙස, බොත්තමක් ඔබාම මූලද්‍රව්‍යයක් සඟවනු ලබන පරිදි කරමු. අප සතුව පහත ඡේදය ඇතැයි සිතමු:

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

අපගේ ඡේදය මුලින්ම පෙන්වනු ලැබේ විදියට සකසමු:

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

දැන් බොත්තමක් සාදමු, එය ඔබූ විට ඡේදය සඟවයි:

App.vue<template>
  <button @click="hide">hide</button>
  <p v-if="visible">text</p>
</template>

බැඳුණු ක්‍රමය visible දේපල false බවට වෙනස් කරයි, එමඟින් අපගේ ඡේදය සැඟවීමට හේතු වේ:

javascriptmethods: {
  hide: function() {
    this.visible = false;
  }
}
Задание 1

ඡේදයක් සහ බොත්තමක් ලබා දී ඇත. ඡේදය මුලින්ම සඟවා ඇතැයි සිතමු. ඡේදය පෙන්වන බොත්තමක් සාදන්න.

Задание 2

ඡේදයක් සහ බොත්තම් දෙකක් ලබා දී ඇත. පළමු බොත්තම ඡේදය පෙන්වයි, දෙවැන්න - එය සඟවයි.

Задание 3

පෙර කාර්යය වෙනස් කරන්න, එවිට තිරයේ සැමවිටම බොත්තම් වලින් එකක් පමණක් පෙනෙනු ඇත: ඡේදය පෙන්වන්නේ නම්, සඟවීම සඳහා බොත්තම, සඟවා ඇත්නම් - පෙන්වීම සඳහා බොත්තම.