Condição Reativa no Vue
Vamos fazer com que a condição seja reativa. Por exemplo, vamos fazer com que o elemento seja ocultado ao clicar em um botão. Suponha que temos o seguinte parágrafo:
<template>
<p v-if="visible">texto</p>
</template>
Vamos fazer com que nosso parágrafo seja mostrado inicialmente:
data() {
return {
visible: true,
}
}
Agora, vamos criar um botão que, ao ser clicado, ocultará o parágrafo:
<template>
<button @click="hide">ocultar</button>
<p v-if="visible">texto</p>
</template>
O método vinculado alterará a
propriedade visible para false,
fazendo com que nosso
parágrafo seja ocultado:
methods: {
hide: function() {
this.visible = false;
}
}
Dado um parágrafo e um botão. Suponha que o parágrafo esteja inicialmente oculto. Crie um botão que mostrará o parágrafo.
Dado um parágrafo e dois botões. Suponha que o primeiro botão mostre o parágrafo, e o segundo - o oculte.
Modifique a tarefa anterior para que sempre apenas um dos botões esteja visível na tela: se o parágrafo for mostrado, o botão para ocultar, e se estiver oculto - o botão para mostrar.
