Pesquisar neste blog

12/08/2020

Renderização condicional múltipla em HTML

 

<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>

<div id="app">
    <p v-if"logado">Usuário Logado: {{ nome }}</p><!--se estiver logado-->
    <p v-else-if"anonimo">Navegando como Anônimo como Anônimo</p>
    <p v-else="!logado">Nenhum usuário logado</p>
    <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}</button>
    <input type="checkbox" v-model="anonimo"><!--apontando para anônimo-->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nome: 'Henrique',//Nome do usuário
            logado: false,
            anonimo: false,//caso deseje entrar como anônimo
        }
    })
</script>



Nenhum comentário: