如何用Svelte实现元素显隐切换？与Vanilla JS相比哪个更简便？

Svelte 实现方式 #

Svelte基于声明式状态管理，实现显示隐藏无需手动操作DOM，直接通过状态变量控制即可，常用两种方式：

方法1：使用{#if}块（添加/移除DOM元素） #

这种方式会直接在DOM中添加或移除目标元素，适合不需要保留元素状态的场景：

<script>
  let isVisible = true;

  function toggleVisibility() {
    isVisible = !isVisible;
  }
</script>

<button on:click={toggleVisibility}>
  {isVisible ? '隐藏元素' : '显示元素'}
</button>

{#if isVisible}
  <div class="target-element">这是要切换显示的内容</div>
{/if}

方法2：通过样式控制（保留DOM元素） #

如果需要保留元素在DOM中（比如维持表单输入状态），可以通过控制style.display或CSS类实现：

<script>
  let isVisible = true;

  function toggleVisibility() {
    isVisible = !isVisible;
  }
</script>

<style>
  .hidden { display: none; }
</style>

<button on:click={toggleVisibility}>
  {isVisible ? '隐藏元素' : '显示元素'}
</button>

<div class="target-element {isVisible ? '' : 'hidden'}">
  这是要切换显示的内容
</div>

Vanilla JS 实现方式 #

纯原生JS环境下，直接操作DOM就能完成，步骤简单：

基础样式控制 #

<button id="toggleBtn">隐藏元素</button>
<div id="targetElement">这是要切换显示的内容</div>

<script>
  const toggleBtn = document.getElementById('toggleBtn');
  const targetElement = document.getElementById('targetElement');
  let isVisible = true;

  toggleBtn.addEventListener('click', () => {
    isVisible = !isVisible;
    targetElement.style.display = isVisible ? 'block' : 'none';
    toggleBtn.textContent = isVisible ? '隐藏元素' : '显示元素';
  });
</script>

CSS类切换（更推荐，样式与逻辑分离） #

<button id="toggleBtn">隐藏元素</button>
<div id="targetElement" class="target-element">这是要切换显示的内容</div>

<style>
  .hidden { display: none; }
</style>

<script>
  const toggleBtn = document.getElementById('toggleBtn');
  const targetElement = document.getElementById('targetElement');

  toggleBtn.addEventListener('click', () => {
    const isVisible = !targetElement.classList.contains('hidden');
    targetElement.classList.toggle('hidden');
    toggleBtn.textContent = isVisible ? '隐藏元素' : '显示元素';
  });
</script>

哪种方式更简便？ #

• 若项目已基于Svelte开发，Svelte实现更简洁：无需手动获取DOM，状态与视图自动绑定，代码聚焦业务逻辑，维护成本更低。
• 若只是单个独立小交互（比如静态页面的简单功能），Vanilla JS更直接：无需引入框架，几行代码搞定，无额外构建或依赖成本。

简言之，根据场景选择——框架适配规模化项目，原生适配轻量独立需求。

内容的提问来源于stack exchange，提问作者Xanthan