如何使用 Alpine toggle 切换内容？答案

【问题标题】：How to use Alpine toggle to switch content?如何使用 Alpine toggle 切换内容？
【发布时间】：2021-10-24 18:59:41
【问题描述】：

我正在使用顺风和 AlpineJS。我设计了波纹管切换开关，但我似乎无法弄清楚如何在不同内容之间切换。

任何帮助将不胜感激。

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
            <div class="flex justify-center items-center mt-8" x-data="{toggle: '0'}">              
                <span class=" block mr-3 text-xs">Residential</span>
                 <div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
                     :class="[toggle === '1' ? 'bg-black' : 'bg-black']">
                  <label for="toggle"
                         class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
                         :class="[toggle === '1' ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']"></label>
                  <input type="checkbox" id="toggle" name="toggle"
                         class="appearance-none w-full h-full active:outline-none focus:outline-none"
                         @click="toggle === '0' ? toggle = '1' : toggle = '0'"/>
                </div> 
                <span class=" block ml-3 text-xs">Business</span>
            </div>

            <div id="toggleOff">This content shows on page load and toggle is off, otherwise it is hidden</div>
            <div id="toggleOn">This content shows when the toggle is clicked, otherwise it is hidden</div>

【问题讨论】：

标签： tailwind-css alpine.js tailwind-ui

【解决方案1】：

根据 alpine.js 文档，您可以使用内置指令来显示/隐藏元素并传递输入值。

所以基本上，x-bind 指令 (more here) 允许您将输入值绑定到变量。您可以将其添加到您的复选框并作为变量集toggle。还有 x-show 指令 (more here)，当给定指令表达式为真时，它只是将 display 属性设置为 none。

问题在于x-data 范围。如果要使用该指令中声明的变量，则该元素必须嵌套在带有x-data 指令的元素中。

总体而言，您的代码可能如下所示：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet" />
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{toggle: false}">

    <div class="flex justify-center items-center mt-8">
        <span class=" block mr-3 text-xs">Residential</span>

        <div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
             :class="[toggle ? 'bg-black' : 'bg-black']">

            <label for="toggle"
                   class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
                   :class="[toggle ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']">
            </label>

            <input type="checkbox"
                   id="toggle"
                   name="toggle"
                   x-model="toggle"
                   class="appearance-none w-full h-full active:outline-none focus:outline-none" />
        </div>

        <span class=" block ml-3 text-xs">Business</span>
    </div>

    <div id="toggleOff"
         x-show="!toggle">
        This content shows on page load and toggle is off, otherwise it is hidden
    </div>
    
    <div id="toggleOn"
         x-show="toggle">
        This content shows when the toggle is clicked, otherwise it is hidden
    </div>

</div>

【讨论】：