一个div中的两个x数据
一个div中的两个x数据
提问于 2022-02-10 13:14:01
我试着用AlpineJS来学习HTML。隐藏/显示一个div很容易。但是，当我试图使相同的div (Dis)中的2项出现时，它对第二项不起作用。我认为这是一个简单的解决办法，但我真的找不到答案。这是我的密码：
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testpage</title>
</head>
<body>
<div
x-data="{ isOpen: true }"
x-data="{ isOpen2: true }">
<button @click="isOpen = !isOpen" class="bg-slate-300 border-black border-4 mt-5">BUTTON 1</button>
<br>
<button @click="isOpen2 = !isOpen2" class="bg-slate-300 border-black border-4 mt-5 mb-5">BUTTON 2</button>
<h1 x-show="isOpen">TEXT 1</h1>
<h1 x-show="isOpen2">TEXT 2</h1>
</div>
</body>
</html>有谁知道我怎样才能做得更好吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-10 13:33:28
你试过这样做吗？
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testpage</title>
</head>
<body>
<div
x-data="{ isOpen: true, isOpen2: true }">
<button @click="isOpen = !isOpen" class="bg-slate-300 border-black border-4 mt-5">BUTTON 1</button>
<br>
<button @click="isOpen2 = !isOpen2" class="bg-slate-300 border-black border-4 mt-5 mb-5">BUTTON 2</button>
<h1 x-show="isOpen">TEXT 1</h1>
<h1 x-show="isOpen2">TEXT 2</h1>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71065779
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号