Как использовать переключатель Alpine для переключения контента?

Question

Я использую попутный ветер и AlpineJS. Я разработал тумблер, расположенный ниже, но, похоже, не могу понять, как переключаться между различным контентом.

Любая помощь будет оценена.

Answer 1

Согласно документации alpine.js, вы можете использовать встроенные директивы для отображения / скрытия элементов и передачи значения ввода.

Итак, в основном x-bindДиректива (подробнее здесь ) позволяет привязать значение ввода к переменной. Вы можете добавить это в свой флажок и как переключатель набора переменных . Также есть x-showдиректива (подробнее здесь), которая просто устанавливает для свойства display значение none, если заданное в директиве выражение истинно.

Проблема в размахе. Если вы хотите использовать переменную, объявленную в этой директиве, элемент должен быть вложен в элемент с x-data директива.

В целом ваш код может выглядеть так: