[Mise] Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS
2021-03-07 00:30
标签：condition base not set fine his col span ons In this lesson, we create a set of tabs with Alpine JS, where only the content of the currently active tab is visible. To do this, we define an We also take control of the [Mise] Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS 标签：condition base not set fine his col span ons 原文地址：https://www.cnblogs.com/Answer1215/p/12890631.htmlactiveTab state value with x-data. We then wire up our buttons to change the value ofactiveTabon click, and usex-showto determine if the tab content should be visible or not, based on the value ofactiveTab`.class attribute with x-bind, and we conditionally output an "active" class based on, you guessed it, the value of activeTab.div x-data="{activeTab: 0}">
div>
button @click="activeTab = 0" :class="{‘active‘: activeTab === 0}">Tab 1button>
button @click="activeTab = 1" :class="{‘active‘: activeTab === 1}">Tab 2button>
button @click="activeTab = 2" :class="{‘active‘: activeTab === 2}">Tab 3button>
div>
div>
div x-show="activeTab === 0">p>I am the content of tab number one, and I think I just won! ??p>div>
div x-show="activeTab === 1">p>Heya! I root for number two, and so should you! ??p>div>
div x-show="activeTab === 2">p>Haha nice one, but I am number three, and now it‘s all about me! ??p>div>
div>
div>
上一篇：html5-秒懂路径
下一篇：[Mise] Update a count state value with the x-on event listener directive in Alpine JS
文章标题：[Mise] Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS
文章链接：http://soscw.com/index.php/essay/61104.html