Redare condiționată Vue.js

Redarea condiționată în Vue.js vă permite să afișați sau să ascundeți în mod dinamic elemente în funcție de anumite condiții. Această caracteristică este esențială pentru crearea de interfețe de utilizator receptive și interactive. Vue.js oferă mai multe directive pentru a gestiona randarea condiționată, permițându-vă să gestionați eficient vizibilitatea elementelor din aplicația dvs.

v-daca Directiva

Directiva v-if este folosită pentru a reda condiționat elemente bazate pe veridicitatea unei expresii. Dacă expresia este evaluată la true, elementul este redat; în caz contrar, nu este inclus în DOM. Iată un exemplu de bază:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

În acest exemplu, elementul paragraf este redat numai dacă isVisible este true. Făcând clic pe butonul comută valoarea isVisible și astfel controlează vizibilitatea paragrafului.

v-altfel Directiva

Directiva v-else poate fi utilizată împreună cu v-if pentru a specifica un bloc de conținut alternativ de afișat când condiția v-if este fals. Iată un exemplu:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

În acest exemplu, când isVisible este true, este afișat primul paragraf. Când isVisible este false, al doilea paragraf este afișat în schimb.

Directiva v-show

Directiva v-show vă permite, de asemenea, să randați elemente condiționat, dar diferă de v-if prin faptul că comută vizibilitatea elementului folosind CSS display proprietate în loc să o adăugați sau să o eliminați din DOM. Acest lucru poate fi mai eficient dacă trebuie să comutați frecvent vizibilitatea unui element.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

În acest exemplu, directiva v-show controlează vizibilitatea paragrafului setând proprietatea display. Elementul rămâne în DOM, dar este ascuns sau afișat pe baza valorii isVisible.

v-else-if Directiva

Directiva v-else-if este folosită pentru a crea un lanț "else if" în logica de redare condiționată. Vă permite să specificați condiții suplimentare pentru a evalua dacă condiția anterioară v-if nu este îndeplinită. Iată un exemplu:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

În acest exemplu, conținutul afișat depinde de valoarea proprietății status. Directivele v-if, v-else-if și v-else sunt folosite pentru a gestiona diferite stări.

Concluzie

Redarea condiționată este un aspect crucial al dezvoltării de aplicații interactive și dinamice cu Vue.js. Folosind directive precum v-if, v-else, v-show și v-else-if, puteți controla afișarea elementelor în funcție de diferite condiții. Stăpânirea acestor directive vă va ajuta să creați interfețe mai receptive și mai ușor de utilizat în aplicațiile dvs. Vue.js.