Vue හි ප්රතික්රියාශීලී කොන්දේසිය
කොන්දේසිය ප්රතික්රියාශීලී වන පරිදි සකසමු. උදාහරණයක් ලෙස, බොත්තමක් ඔබාම මූලද්රව්යයක් සඟවනු ලබන පරිදි කරමු. අප සතුව පහත ඡේදය ඇතැයි සිතමු:
<template>
<p v-if="visible">text</p>
</template>
අපගේ ඡේදය මුලින්ම පෙන්වනු ලැබේ විදියට සකසමු:
data() {
return {
visible: true,
}
}
දැන් බොත්තමක් සාදමු, එය ඔබූ විට ඡේදය සඟවයි:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
බැඳුණු ක්රමය visible දේපල
false බවට වෙනස් කරයි,
එමඟින් අපගේ
ඡේදය සැඟවීමට හේතු වේ:
methods: {
hide: function() {
this.visible = false;
}
}
ඡේදයක් සහ බොත්තමක් ලබා දී ඇත. ඡේදය මුලින්ම සඟවා ඇතැයි සිතමු. ඡේදය පෙන්වන බොත්තමක් සාදන්න.
ඡේදයක් සහ බොත්තම් දෙකක් ලබා දී ඇත. පළමු බොත්තම ඡේදය පෙන්වයි, දෙවැන්න - එය සඟවයි.
පෙර කාර්යය වෙනස් කරන්න, එවිට තිරයේ සැමවිටම බොත්තම් වලින් එකක් පමණක් පෙනෙනු ඇත: ඡේදය පෙන්වන්නේ නම්, සඟවීම සඳහා බොත්තම, සඟවා ඇත්නම් - පෙන්වීම සඳහා බොත්තම.
