aulas/aula-6.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curso Alpine.js - Aula 6</title>
    <script src="//unpkg.com/alpinejs" defer></script>
    <style>
        .red {
            color: red;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <!-- Exemplo 1 -->
    <!-- <div x-data="{
        error:false
    }">
        <span x-bind:class="{'red':error}" class="bold">Teste</span>
        <button type="button" x-on:click="error=!error">Alterar</button>
    </div> -->

    <div x-data="{
        imagem: 'https://via.placeholder.com/150',
        texto_input: 'Endereço da imagem'
    }">
        <input type="text" x-model="imagem" x-bind:placeholder="texto_input">
        <img x-bind:src="imagem" alt="">
        <button type="button" x-on:click="">Alerar imagem</button>

    </div>
</body>

</html>