Renderização condicional Vue.js

A renderização condicional no Vue.js permite que você exiba ou oculte elementos dinamicamente com base em certas condições. Esse recurso é essencial para criar interfaces de usuário responsivas e interativas. O Vue.js fornece várias diretivas para lidar com a renderização condicional, permitindo que você gerencie com eficiência a visibilidade dos elementos em seu aplicativo.

Diretiva v-if

A diretiva v-if é usada para renderizar condicionalmente elementos com base na veracidade de uma expressão. Se a expressão for avaliada como true, o elemento será renderizado; caso contrário, ele não será incluído no DOM. Aqui está um exemplo básico:

<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>

Neste exemplo, o elemento de parágrafo é renderizado somente se isVisible for true. Clicar no botão alterna o valor de isVisible e, portanto, controla a visibilidade do parágrafo.

Diretiva v-else

A diretiva v-else pode ser usada em conjunto com v-if para especificar um bloco alternativo de conteúdo a ser exibido quando a condição v-if for false. Aqui está um exemplo:

<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>

Neste exemplo, quando isVisible é true, o primeiro parágrafo é exibido. Quando isVisible é false, o segundo parágrafo é exibido.

Diretiva v-show

A diretiva v-show também permite que você renderize elementos condicionalmente, mas difere de v-if porque alterna a visibilidade do elemento usando a propriedade CSS display em vez de adicioná-la ou removê-la do DOM. Isso pode ser mais eficiente se você precisar alternar frequentemente a visibilidade de um elemento.

<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>

Neste exemplo, a diretiva v-show controla a visibilidade do parágrafo definindo sua propriedade display. O elemento permanece no DOM, mas é oculto ou exibido com base no valor isVisible.

Diretiva v-else-if

A diretiva v-else-if é usada para criar uma cadeia "else if" na sua lógica de renderização condicional. Ela permite que você especifique condições adicionais para avaliar se a condição v-if anterior não for atendida. Aqui está um exemplo:

<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>

Neste exemplo, o conteúdo exibido depende do valor da propriedade status. As diretivas v-if, v-else-if e v-else são usadas para manipular estados diferentes.

Conclusão

A renderização condicional é um aspecto crucial do desenvolvimento de aplicativos interativos e dinâmicos com Vue.js. Ao usar diretivas como v-if, v-else, v-show e v-else-if, você pode controlar a exibição de elementos com base em várias condições. Dominar essas diretivas ajudará você a criar interfaces mais responsivas e amigáveis ​​ao usuário em seus aplicativos Vue.js.