Bedingte Gruppen in Vue

Manchmal müssen wir eine Bedingung auf eine ganze Gruppe von Tags anwenden. In diesem Fall können wir sie mit einem gemeinsamen Elternelement zusammenfassen und die Bedingung darauf anwenden:

html<template>
  <div v-if="isAuth">
    <p>+++</p>
    <p>+++</p>
    <p>+++</p>
  </div>
</template>

Manchmal möchten wir die Tags nicht mit einem gemeinsamen Elternelement umschließen. In diesem Fall können sie mit dem Tag template zusammengefasst werden. Dieser Tag fasst andere Tags zusammen, erscheint aber nicht im finalen HTML. Wenden wir eine Bedingung auf diesen Tag an:

html<template>
  <template v-if="isAuth">
    <p>+++</p>
    <p>+++</p>
    <p>+++</p>
  </template>
</template>
Задание 1

Angenommen, Sie haben drei Absätze und einen Button. Sorgen Sie dafür, dass beim Klicken auf den Button diese Absätze ausgeblendet werden.