【書き方ちょろすぎて草】Alpine.jsの書き方の基本

書き方

x-dataを書くところから始まります。

x-dataはプロパティと関数を定義するために使います。

x-dataは基本的にHTMLのタグに付けます。

    <div x-data="{
        プロパティ名: 値,
        関数名() {
            実行したい処理
            例）プロパティに値を代入する
                this.プロパティ名 = 値
        },
    }">
        HTML要素を書く
    </div>

ここで定義したプロパティ、関数の適用範囲は上記の例で言えばdiv要素で囲んだ範囲内のみとなります。

実例

こんだけのコードで表示の切り替えが実装できます。
一瞬で書けてしもた！！

<div x-data="{
    open: false,
    toggle() {
        this.open = ! this.open
    },
}">
    <button @click="toggle">￥表示</button>
 
    <div x-show="open">
        やっほー
    </div>
</div>

See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.

まとめ

プロパティと関数名を定義していくだけで簡単に表示非表示のトグルボタンが作れる。お手軽すぎる。