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

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

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

環境

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

Alpine.js導入

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

テキストの表示・非表示

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

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