Alpine.jsでx-dataとx-showを使用してテキストの表示・非表示を切り替える

作成日 2020.11.03
Alpine.js
Alpine.js

JavaScriptフレームワークの1つであるAlpine.jsを導入して、ディレクティブ「x-data」と「x-show」を使用してテキストの表示・非表示を切り替えるサンプルコードを記述してます。

1. 環境
2. Alpine.js導入
3. テキストの表示・非表示

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105
Alpine.js 2.7.3

windows10にApacheのインストール

Alpine.js導入

CDNから読み込んで利用します。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>

テキストの表示・非表示

「x-data・x-show」ディレクティブを使用して、テキストの表示・非表示を行うサンプルコードとなります。
CSSにtailwindを使用してます。

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

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.js" defer></script>
</head>

<body class="sans-serif bg-gray-200">

    <div class="container mx-auto my-56 w-56 px-4">

        <div x-data="app()">
            <button type="button"
                class="bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full"
                @click="open()">テキストを表示</button>

            <div x-show="isOpen" @click.away="close()">
                <p class="text-2xl">hello world</p>
            </div>
        </div>
        
    </div>

    <script>
        function app() {
            return {
                isOpen: false,
                open() {
                    this.isOpen = true;
                },
                close() {
                    this.isOpen = false;
                }
            }
        }
    </script>
</body>

</html>

実行結果を確認するとテキストの表示・非表示が切り替えられていることが確認できます。