Alpine.jsのx-modelディレクティブの使い方

1. 基本的なx-modelの使用例:

   <div x-data="{ name: '' }">
   <input type="text" x-model="name">
   <p>入力された名前: <span x-text="name"></span></p>
   </div>

   上記のコードでは、x-data属性にオブジェクトを指定し、x-model属性にバインドしたいデータを指定します。入力フィールドに値を入力すると、入力された名前が表示されます。

2. チェックボックスの使用例:

   <div x-data="{ checked: false }">
   <input type="checkbox" x-model="checked">
   <p x-show="checked">チェックされました</p>
   </div>

   上記のコードでは、x-modelをチェックボックスにバインドしています。チェックボックスがチェックされると、"チェックされました"というテキストが表示されます。

3. ラジオボタンの使用例:

   <div x-data="{ color: 'red' }">
   <input type="radio" value="red" x-model="color">赤
   <input type="radio" value="blue" x-model="color">青
   <p>選択された色: <span x-text="color"></span></p>
   </div>

   上記のコードでは、x-modelをラジオボタンにバインドしています。選択された色が表示されます。

4. セレクトボックスの使用例:

   <div x-data="{ selected: '' }">
   <select x-model="selected">
   <option value="">選択してください</option>
   <option value="apple">りんご</option>
   <option value="banana">バナナ</option>
   </select>
   <p>選択されたフルーツ: <span x-text="selected"></span></p>
   </div>

   上記のコードでは、x-modelをセレクトボックスにバインドしています。選択されたフルーツが表示されます。

以上が、Alpine.jsのx-modelディレクティブの使い方といくつかのコード例です。これを参考にして、インタラクティブなWebアプリケーションを開発してみてください。