tiagofrancafernandes/exemplos-com-alpinejs.md

## exemplos-com-alpinejs.md

      
    Raw
  

              exemplos-com-alpinejs.md
            
          
    For básico

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div
        x-data="{
            count: 0,
            professores: [
                {
                    nome: 'Thiago',
                    materia: 'Inglês',
                },
                {
                    nome: 'Tiago França',
                    materia: 'Programação',
                },
            ],
        }"
    >
        <button
            x-on:click="count++"
        >Increment</button>

        <div>
            <span x-text="count"></span>
        </div>

        <div>
            <h5>Professores</h5>
            <div>
                <template
                    x-for="professor in professores"
                    :key="professor"
                >
                    <div>
                        <ul>
                            <li>Nome: <strong x-text="professor.nome"></strong></li>
                            <li>Matéria: <strong x-text="professor.materia"></strong></li>
                        </ul>
                        <hr>
                    </div>
                </template>
            </div>
        </div>
    </div>
</body>
</html>

  
## if-else-switch-case.md

      
    Raw
  

              if-else-switch-case.md
            
          
    echo = (...content) => {
  let text = content.join('');

  console.log(text);
}

// 1234567
diaDaSemana = '1';

diasDaSemana = {
  '1': 'Domingo',
  '2': 'Segunda',
  '3': 'Terça',
  '4': 'Quarta',
  '5': 'Quinta',
  '6': 'Sexta',
  '7': 'Sábado',
}

// switch(diaDaSemana) {
//   case '2':
//   case '3':
//   case '4':
//   case '5':
//   case '6':
//     echo('Dia útil ', diasDaSemana[diaDaSemana], `\n`);
//     break;

//   case '1':
//   case '7':
//     echo('Fim de semana ', diasDaSemana[diaDaSemana], `\n`);
//     break;

//   default:
//     echo('Dia inválido', `\n`);
//     break;
// }


if (['2', '3', '4', '5', '6',].includes(diaDaSemana)) {
    echo('Dia útil ', diasDaSemana[diaDaSemana], `\n`);
} else if (['1', '7'].includes(diaDaSemana)) {
    echo('Fim de semana ', diasDaSemana[diaDaSemana], `\n`);
} else {
    echo('Dia inválido', `\n`);
}


echo(`\n\n\n\n\n\n`);

echo('Ultima linha', `\n`);

  
## metodos-getter-em-objetos-js.md

      
    Raw
  

              metodos-getter-em-objetos-js.md
            
          
    pessoa = {
  ncCount: 0,
  nome: 'Thiago',
  sobrenome: 'Assis 1',
  get nomeCompleto() { // Dinâmico
    let unixTime = (new Date()).getTime();
    this.ncCount++;
    return `${this.nome} ${this.sobrenome} [${unixTime}] [${this.ncCount}]`;
  },
  setNome(nome) {
    this.nome = nome;
  },
};

// pessoa['nomeCompleto'] = `${pessoa.nome} ${pessoa.sobrenome}`; // Estático
pessoa['sobrenome'] = 'Silva 2';
pessoa['sobrenome'] = 'Silva 3';

// console.log('Nome completo:', `${pessoa.nome} ${pessoa.sobrenome}`);
// console.log('Nome completo:', `${pessoa.nomeCompleto}`);
// console.log('Nome completo:', `${pessoa.nomeCompleto()}`);

console.log('Nome completo:', `${pessoa.nomeCompleto}`);
setTimeout(() => {
//   pessoa.setNome('Marcos');
    console.log('Nome completo:', `${pessoa.nomeCompleto}`);
}, 500)

console.log('after Nome completo:', `${pessoa.nomeCompleto}`);