Alpine.jsのx-bindって何？
今日の調べてみたは、Alpine.jsのx-bindです。
Alpine.jsのx-bindって何？
Alpine.jsのx-bindは、HTML要素の属性値に変数の値を入れるための宣言です。
例えば、以下のように指定すると、disabledには isLoading と言う変数の中身が入ります。isLoadingがtrueならdisabled属性が有効になりますし、falseなら無効になります。
<button x-bind:disabled="isLoading">送信</button>
x-bind には省略記法が存在します。:だけでも書けます。また、変数だけではなくJavaScriptの式もかけます。
<button :disabled="isLoading">送信</button>
<div :class="{ 'text-red-500': hasError }">メッセージ</div>
よく使われるパターンとしては、:classでクラスの切り替え、:styleでスタイルの動的変更、:hrefや:srcのような属性の動的設定あたりが多いようです。
